<template>
  <div class="messageBoxFather" style="position: relative;height:100%;"  ref="messageListRef">

    <div class="screenBox" style="height:100%;"> 
    <div class="fenyeqi">
    </div>
    <div v-show='showDetails' class="messageBox printable-area" style="background-color: #fff;position: relative;" ref="messageRef1" @scroll="throttleFn" id="print-area" >
      <div class="loadingBoxbottom" style="color:#2196f3;cursor: pointer;" @click="loadMoreData"><i :class="loadClass2" style="color:#2196f3"></i> {{ loadingText2 }}</div>
      <el-button class="dayin" style="float:right;margin-left:20px;" type="text" @click="rushShunXv" title="点击排序颠倒"><i class="el-icon-refresh"></i> {{rushText}}</el-button>
      
      <!-- <el-button class="dayin" style="float:right;" type="text" @click="openPrintModel" :title="$t('wechat.openPrint')" ><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button> -->
  <!-- 系统消息提示区 -->
    <div  v-for="(item,index) in messageData" :key="index">
      <div v-if="showPageN" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;font-size:12px;color:#ccc;font-weight:100!important;">
        {{setPageNumber(index).str}}
      </div>

<!-- ******************************************* 接收区 ******************************************************* -->
      <div v-if="item.msgtype==-1012" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{$t('wechat.systemTip')}}：{{item.contant}}
      </div>
      <div v-else-if="item.msgtype==10000 || item.msgtype==10002 || item.msgtype==570425393" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        <div :title="formateHongBaoSystem(item)">{{formateHongBaoSystem(item)}}</div><span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span>
      </div>
      <!--   -->
      <div v-else-if="item.msgtype==268445456" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{item.contant}}
      </div>
      <!-- 共享位置 -->
      <div v-else-if="item.msgtype==-1879048186" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{positionGongXiang(item.contant).msg.appmsg.title}}
      </div>

      <!-- left -->
      <div v-else-if="item.issend==0" >
            <!-- Left --> <!-- 语音 -->
            <div v-if="item.msgtype==34" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span>
              
              </div>
              <div class="yuyin"  @click.stop="playAudioFile(item,index)">
                <span class="infoYuYin" title=""></span>
                <div class="chat-left_triangle"></div>
                <img :ref="`audioRef_${index}`" style="width:25px;height:25px;display:inline-block;" v-if="item.contactavatar" :src="leftAudioSrc" />
                <span> 语音气泡</span><img @click.stop="convertToText(item, index)" style="display: inline-block;margin-left:10px" src="../../../assets/rxaudio.png" height="20" width="20" title="转文字" alt="转文字">
                <div style="width:100%; margin: 0;text-align: left;color:#686b6d;margin-left:10px;" v-if="transcriptions[index]">
                  {{ transcriptions[index] }}
                </div>
                <span @click.stop="detailsAuideInfo(item)" title="语音详情" style="margin-left:50px;font-size:20px;color:#0590df;"><i class="el-icon-warning-outline"></i></span>
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            <!-- Left --> <!-- 文本 -->
            <div v-else-if="item.msgtype==1 || item.msgtype==268445458 ||item.msgtype==808180 ||item.msgtype==822083633 || item.msgtype==64" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position: relative;">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span  style="word-wrap: break-word;" v-html='parsingEmoji(String(item.contant))'></span>
                <!-- <span  style="word-wrap: break-word;">{{ item.contant }}</span> -->
                <div v-if="showBiaoJi">
                  <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
              </div>
            </div>
            <!-- left 发票 -->
            <div v-else-if="item.msgtype==452984881" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="postiton:relative;">
                <img src="../../../assets/images/weChatQQ/user-group.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
                <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="hrefBox" @click.stop="openMusic(initFormateMusic(item.contant).msg.appmsg.url)">
                  <div class="hrefBoxLeftBox">
                    <span class="grefTitleSpan">{{initFormateMusic(item.contant).msg.appmsg.des}}</span>
                    <p class="hrefBoxContentDeatils">{{initFormateMusic(item.contant).msg.appmsg.title}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" :src="initFormateMusic(item.contant).msg.appmsg.thumburl" alt="">
                  </div>
                </div>
                <div class="textInfo" >分享链接</div>
                <div v-if="showBiaoJi" style="background-color: #fff;">
                  <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:10px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
              </div>
            </div>
            <!-- Left --> <!-- 群接龙 -->
            <div v-else-if="item.msgtype==805306417" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span style="word-wrap: break-word;">{{qunChatList(item.contant).msg.appmsg.title}}</span>
                <div v-if="showBiaoJi">
                  <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
              </div>
            </div>

            <!-- Left --> <!-- 添加好友请求消息 -->
            <div v-else-if="item.msgtype==37" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="background:#fff;text-indent: 0px;">
                <div class="nameCard" @click="viewsFriendCard(addWxFriendfMsg(item).msg)">
                  <div class="contentNameCard">
                    <img  height="" :src="formateCard(item).msg._bigheadimgurl" alt="">
                    <div class="nameCardNameTExt">{{addWxFriendfMsg(item)._content}}</div>
                  </div>
                  <div class="nameSiren">好友申请</div>
                  <div v-if="showBiaoJi">
                    <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                    <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Left --> <!-- 语音通话 -->
            <div v-else-if="item.msgtype==50" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span v-if="item.contant=='voip_content_voice'">语音通话</span>
                <span v-else-if="item.contant=='voip_content_video'">视频通话</span>
                <span v-else>{{formateAudioCall(item).text}}<i style="margin-left:15px;font-weight:1000;" :class="formateAudioCall(item).icon"></i></span>
               <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
              </div>
            </div>
            <!-- Left --> <!-- 转发聊天记录 -->
            <div v-else-if="(item.msgtype==353 || item.msgtype==-19) && item.contant.indexOf('<msg>')==-1" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px">
              <h4 style="text-align: center;color:#0590df;">转发的聊天记录</h4>
                <span style="font-size: 13px;color: #9d9d9d;">描述：{{messageRemrd(item.contant).desc}}</span>
                <p v-for="(qunliaoItem,sisi) in messageRemrd(item.contant).msg" :key="sisi">
                    <!-- 转发文字 -->
                    <span v-if="qunliaoItem.type==1" style="margin-bottom:10px;">
                      <span style="margin-top:10px;color:#0590df;display: block;">{{qunliaoItem.sourcename}}:</span>
                      <span style="font-size: 13px;color: #9d9d9d;">{{ qunliaoItem.time }}</span><br>
                      <span style="font-size: 13px;">{{qunliaoItem.msg}}</span>
                    </span>
                    <!-- 转发图片 -->
                    <span v-else-if="qunliaoItem.type==2" style="margin-bottom:10px;">
                      <span style="margin-top:10px;color:#0590df;display: block;">{{qunliaoItem.sourcename}}:</span>
                      <span style="font-size: 13px;color: #9d9d9d;">{{ qunliaoItem.time }}</span><br>
                      <span style="font-size: 13px;">[图片]</span>
                    </span>
                    <!-- 转发链接 -->
                    <span v-else-if="qunliaoItem.type==5" style="margin-bottom:10px;">
                      <span style="margin-top:10px;color:#0590df;display: block;">{{qunliaoItem.sourcename}}:</span>
                      <span style="font-size: 13px;color: #9d9d9d;">{{ qunliaoItem.time }}</span><br>
                      <a title="点击跳转" :href="qunliaoItem.weburlitem.link" target="blank">
                        <span >链接：{{qunliaoItem.weburlitem.title}}</span>
                      </a>
                    </span>
                    <span v-else style="font-size:13px;">
                      未知
                    </span>
                  </p>


                  <div v-if="showBiaoJi">
                  <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                    <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
            </div>
            </div>
            <!-- Left --> <!-- 表情 -->
            <div v-else-if="item.msgtype==2 || item.msgtype==47" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
            <div style="position:relative;">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;">
                  <div class="demo-image__preview">
                  <el-image
                      class="biaoqing-image"
                      style="width:100%; height: 100%"
                      :src="item.respath?'file:///'+item.respath:formateImg(item)"
                      :preview-src-list="srcList">
                  </el-image>
                  </div>
                  <div v-if="showBiaoJi">
                    <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                    <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                  </div>

              </div>
            </div>
            <!-- Left --> <!-- 图片 -->
            <div v-else-if="item.msgtype==3" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
            <div style="position:relative">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
                        <div style="text-indent: 0px;">
            <div class="demo-image__preview">
              <el-image
                style="width:100%; height: 100%"
                :src="item.respath"
                :preview-src-list="srcList">
              </el-image>
              <!-- 图片内文字 -->
            <p style="margin-top:10px" v-if="item.media_txt && item.media_txt.trim() !== ''" 
                class="image-extra-info media-text">
              <span class="label">图片内文字：</span>{{ item.media_txt }}
            </p>

            <!-- 标签 -->
            <p v-if="item.extra_txt && item.extra_txt.trim() !== ''" 
                class="image-extra-info extra-text">
              <span class="label">标签：</span>{{ item.extra_txt }}
            </p>
            </div>

            <!-- 标记按钮区域 -->
            <div v-if="showBiaoJi">
              <div class="badgeBox" v-if="item.cntRemark > 0">{{$t('wechat.remarked')}}</div>
              <el-button class="orderBtn"
                        :title="$t('wechat.remarkTip')"
                        v-else
                        @click="markOrder(item)"
                        type="text"
                        size="mini"
                        style="margin-right:20px;float:right;color:#000;"
                        icon="el-icon-edit">
                {{$t('wechat.biaoji')}}
              </el-button>
            </div>
          </div>
            </div>
        <!-- Left --> <!-- 位置 -->
            <div v-else-if="item.msgtype==48" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="item.contactavatar" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;">
                  <div class="map">
                    <div class="mapTitle">
                          <div style="width: 100%;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;" :title="formdatePosition(item)._poiname">{{formdatePosition(item)._poiname}}</div>
                          <span style="display:block;color:#6e6e6ea6;width:230px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{formdatePosition(item)._label}}</span>
                      </div>
                      <p class="mapBox" style=""  v-show="showMapTooger">
                          <chatMap class="mapmapmap"  ref="mapChat" style="float:none;" :iddata="`map${index}`" v-if="formdatePosition(item)" :position="formdatePosition(item)"/>
                      </p>
                  </div>
                  <div v-if="showBiaoJi">
                    <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                    <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                  </div>
              </div>
            </div>
            
            <!-- Left --> <!-- 名片 -->
            <div v-else-if="item.msgtype==42" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="background:#fff;text-indent: 0px;position: relative;">
                <div class="nameCard" >
              <div class="contentNameCard">
                <img  height="" :src="formateCard(item).msg._bigheadimgurl" alt="">
                <div class="nameCardNameTExt">{{formateCard(item).msg._nickname}}</div>
              </div>
              <div style="text-align: left;padding-left:20px;">
                地区：{{formateCard(item).msg._city +'-'+formateCard(item).msg._province}}
                <br>
                个人名片
              </div>
              <div style="background-color: transparent;" v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
              </div>
            </div>
            <!-- Left --> <!-- 文件 -->
        <div v-else-if="item.msgtype==5 || item.msgtype==1090519089" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>

          <div v-if="item.respath" style="background:#fff;text-indent: 0px;position: relative;">
            <div class="nameCard"  @click="downLoadFile(item.respath,item)">
              <div class="contentNameCard">
                <img  height="" src="../../../assets/images/weChatQQ/file.png" alt="">
                <div class="nameCardNameTExt">{{item.contant}}</div>
              </div>

              <div class="nameSiren" style="text-align:left;">点击打开文件</div>

            </div>
            <div v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>

          </div>
            <div v-else style="background:#fff;text-indent: 0px;position: relative;" :title="item.contant">
            <div class="nameCard">
              <div class="contentNameCard">
                <img  height="" src="../../../assets/images/weChatQQ/file.png" alt="">
                <div class="nameCardNameTExt">暂无文件路径</div>
              </div>
            </div>
            <div v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>
        </div>
            <!-- left --> <!-- 红包2001 链接5 小程序33 共享位置17 转账2000 -->
            <div v-else-if="(item.msgtype==49 || item.msgtype==419430449 || item.msgtype==436207665) && indexOfFunction(item.contant)!==-1" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
              <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
               <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
               <div v-if="formateHongBao(item).html" style="text-indent: 0px;position: relative;" >
                <div v-if="item.msgtype!==436207665">
                    <div class="chat-left_triangle"></div>
                    <span style="padding-left:20px;" @click="openFileDetailsfunction(item.contant)" v-if="formateContentLast(item.contant)" title="点击查看详情"><i class="el-icon-folder"></i> {{ item.contant }}</span>
                    <p v-else>
                      <span > 该消息类型无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                      <span class="viewsInfoDetailsMessages(item)" @click="viewsErroMessagesDetails(item)">查看详情</span>
                    </p>
                  </div>
                  <div v-else class="QunShouk">
                    <img :src="initQunshoukuan(item.contant).appmsg.thumburl" alt="">
                    <div style="margin-left:10px;">
                     <p>{{initQunshoukuan(item.contant).appmsg.wcpayinfo.receivertitle}}</p>
                    <p>{{initQunshoukuan(item.contant).appmsg.wcpayinfo.receiverdes}}</p>
                    </div>
                  </div>
                  <div v-if="showBiaoJi">
                    <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                    <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                  </div>

                </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type==2001 || item.msgtype==436207665" style="background:#fff;text-indent: 0px;position: relative;" >
                
                <img src="../../../assets/images/weChatQQ/hongbao.png" width="100%" height="100%" alt="">
                <div v-if="showBiaoJi">
                  <div class="badgeBox" style="position:absolute;bottom:20px;right:20px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>

              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type==2000 || item.msgtype==419430449" style="background:#fff;text-indent: 0px;position: relative;" >
                  <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==8" class="hongbaotext">转账{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
                  <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==4" class="hongbaotext">已退还{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
                  <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==3" class="hongbaotext">收到转账{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
                  <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==9" class="hongbaotext">已被退还{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
                  <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==1" class="hongbaotext">转账{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
                  <img src="../../../assets/images/weChatQQ/zhuanzhangleft.png" width="100%" height="100%" alt="">
                  <div v-if="showBiaoJi">
                    <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                    <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                  </div>

              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type==5" style="background:#fff;text-indent: 0px;position: relative;" >
                <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
                  <div style="text-indent: 0px;background:rgb(233, 233, 233);border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                    <div class="hrefBox">
                      <div class="hrefBoxLeftBox">
                        <span class="grefTitleSpan" :title="formateHongBao111(item).msg.appmsg.title">{{formateHongBao111(item).msg.appmsg.title}}</span>
                        <p class="hrefBoxContentDeatils" :title="formateHongBao111(item).msg.appmsg.des">{{formateHongBao111(item).msg.appmsg.des}}</p>
                      </div>
                      <div class="hrefBoxrightBox">
                        <img width="100%" height="100%" src="../../../assets/images/weChatQQ/link.png" alt="">
                      </div>
                    </div>
                    <div class="textInfo" style="text-align:left;">分享链接</div>
                    <div v-if="showBiaoJi" style="background-color: #fff;">
                      <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                      <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:0px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                    </div>

                  </div>
                </a>
              </div>
              
                  <div v-else-if="formateHongBao(item).msg.appmsg.type==76" style="background:#fff;text-indent: 0px;position: relative;" >
                <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
                  <div style="text-indent: 0px;background:rgb(233, 233, 233);border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                    <div class="hrefBox">
                      <div class="hrefBoxLeftBox">
                        <span class="grefTitleSpan" :title="formateHongBao111(item).msg.appmsg.title">{{formateHongBao111(item).msg.appmsg.title}}</span>
                        <p class="hrefBoxContentDeatils" :title="formateHongBao111(item).msg.appmsg.des">{{formateHongBao111(item).msg.appmsg.des}}</p>
                      </div>
                      <div class="hrefBoxrightBox">
                        <img width="100%" height="100%" :src="formateHongBao111(item).msg.appmsg.songalbumurl" alt="">
                      </div>
                    </div>
                    <div class="textInfo" style="text-align:left;">分享音乐</div>
                    <div v-if="showBiaoJi" style="">
                      <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                      <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:0px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                    </div>

                  </div>
                </a>
              </div>
              
              
              <!-- 文件 -->
              <div v-else-if="formateHongBao(item).msg.appmsg.type==74" style="background:#fff;text-indent: 0px;position: relative;" >
                <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
                  <div style="text-indent: 0px;background:rgb(233, 233, 233);border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                    <div class="hrefBox">
                      <div class="hrefBoxLeftBox">
                        <span class="grefTitleSpan" :title="formateHongBao111(item).msg.appmsg.title">{{formateHongBao111(item).msg.appmsg.title}}</span>
                        <p class="hrefBoxContentDeatils" :title="formateHongBao111(item).msg.appmsg.des">{{formateHongBao111(item).msg.appmsg.des}}</p>
                      </div>
                      <div class="hrefBoxrightBox">
                        <img width="100%" height="100%" src="../../../assets/images/weChatQQ/file.png" alt="">
                      </div>
                    </div>
                    <div class="textInfo" style="text-align:left;">文件(文件不存在)</div>
                    <div v-if="showBiaoJi" >
                      <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                      <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:0px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                    </div>

                  </div>
                </a>
              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type==17" style="background:rgb(233, 233, 233);text-indent: 0px;position: relative;" >
              <div >
                <span>
                  {{formateHongBao(item).msg.appmsg.title}} <i class="el-icon-location-outline"></i></span>
              </div>
              <div v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>

              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type==6" style="background:rgb(233, 233, 233);text-indent: 0px;position: relative;" >
              <div >
                <span>
                  {{formateHongBao(item).msg.appmsg.title}}</span>
              </div>
              <div v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>

              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type==33" style="background:#fff;text-indent: 0px;position: relative;" >
                <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
                  <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                    <div class="hrefBox">
                      <div class="hrefBoxLeftBox">
                        <span class="grefTitleSpan" :title="formateHongBao(item).msg.appmsg.title">{{formateHongBao(item).msg.appmsg.title}}</span>
                        <p class="hrefBoxContentDeatils" :title="formateHongBao(item).msg.appmsg.des">{{formateHongBao(item).msg.appmsg.des}}</p>
                      </div>
                      <div class="hrefBoxrightBox">
                        <img width="100%" height="100%" src="../../../assets/images/weChatQQ/system.png" alt="">
                      </div>
                    </div>
                    <div class="textInfo">小程序</div>

                  </div>
                </a>
                <div v-if="showBiaoJi">
                  <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:0px;float:right;color: #000;position: relative;bottom:30px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
              </div>
              <div v-else style="background:rgb(233, 233, 233);text-indent: 0px;position: relative;" >
                <div>
                  <div class="chat-left_triangle"></div>
                  <span> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                  <br>
                <span class="viewsInfoDetailsMessages">{{ item.contant }}</span>
              </div>
              <div v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:10px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>

              </div>
            </div>
            <!-- Left --><!-- 分享短视频 -->
            <!-- <div v-else-if="item.msgtype==754974769" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="item.contactavatar" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;">
                <p v-if="formateHongBao(item).msg.appmsg">

                </p>
                  <p>分享视频</p>
                  <img :src="formateHongBao(item).msg.appmsg" alt="">
                  <div v-if="showBiaoJi">
                    <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                    <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                  </div>
              </div>
            </div> -->
            <!-- Left --> <!-- 视频 -->
            <!-- <div v-else-if="item.msgtype==43" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;position: relative;">
              <div style="position:relative;">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;">
                  <div class="demo-image__preview">
                    <video width="100%" controls :src="item.respath"></video>
                  </div>
              </div>
              <div v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;bottom:-30px;right:50px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div> -->
            <!-- 视频/图片 -->
  <div v-else-if="item.msgtype==43" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;position: relative;">
    <div style="position:relative;">
      <img style="height:40px;width:40px;border-radius: 5px;" 
          v-if="item.contactavatar" 
          :src="item.contactavatar" />
      <div v-if="startPrint" 
          style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;">
        <el-button @click="handleClickPrint(item,$event)" size="small" type="text">添加</el-button>
      </div>
    </div>

    <div>
      <span>
        <span v-if="item.sendernick">{{item.sendernick}}</span>
        <span v-else>{{item.sendername}}</span>
      </span> 
      <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> 
      <span style="color:red;" v-if="item.recovery==1">
        <i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}
      </span>
    </div>

    <div style="text-indent: 0px;">
      <div class="demo-image__preview">
        <!-- 判断 respath 的文件后缀 -->
        <video v-if="isVideo(item.respath)" width="100%" controls :src="item.respath"></video>
        <img v-else-if="isImage(item.respath)" :src="item.respath" style="width:200px;height:200px;border-radius:6px;" />
        <span v-else>无法识别的文件类型</span>
      </div>
    </div>

    <div v-if="showBiaoJi">
      <div class="badgeBox" style="position:absolute;bottom:-30px;right:50px;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
      <el-button class="orderBtn" 
                :title="$t('wechat.remarkTip')" 
                v-else 
                @click="markOrder(item)" 
                type="text" size="mini" 
                style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" 
                icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
    </div>
  </div>


            <!-- Left --> <!-- 分享链接 公众号 -->
            <div v-else-if="item.msgtype==1040187441" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
            <div style="position:relative;">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
                <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="hrefBox" v-if="initFormateMusic(item.contant).msg.appinfo" @click.stop="openMusic(initFormateMusic(item.contant).msg.appmsg.url)">
                  <div class="hrefBoxLeftBox">
                    <span v-if="initFormateMusic(item.contant).msg.appinfo" class="grefTitleSpan">{{initFormateMusic(item.contant).msg.appinfo.appname}}</span>
                    <p v-if="initFormateMusic(item.contant).msg.appinfo" class="hrefBoxContentDeatils">{{initFormateMusic(item.contant).msg.appmsg.title}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" :src="initFormateMusic(item.contant).msg.appmsg.songalbumurl" alt="">
                  </div>
                </div>
                <div v-else>暂无内容！</div>
                <div class="textInfo">分享链接</div>
                <div v-if="showBiaoJi" style="background-color: #fff;">
                  <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:10px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
              </div>
            </div>

               <div v-else-if="item.msgtype==66" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
                <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="hrefBox">
                  <div class="hrefBoxLeftBox" style="text-align:center;">
                    <span class="grefTitleSpan" >{{formateXmlToJson(item).msg._nickname}}</span>
                    <p class="hrefBoxContentDeatils">{{formateXmlToJson(item).msg._openimdesc}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" :src="formateXmlToJson(item).msg._bigheadimgurl" alt="">
                  </div>
                </div>
                <div class="textInfo">分享名片</div>
                <div v-if="showBiaoJi" style="background-color: #fff;">
                  <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:10px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
              </div>
            </div>
            <!-- Left --> <!-- 转发聊天记录 -->
            <div v-else-if="item.msgtype==49 && item.contant.indexOf('聊天记录')!==-1" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
            <div style="position:relative;">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span v-if="item.recovery==1"  class="delClass" style="color:red;"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <p style="margin-bottom:10px;color:blue;text-align: center;">转发的聊天记录</p>
                <p class="qunItemBox" v-for="(j,key) in StringQunLiao(item.contant).msg" :key="key">
                <span v-if="j.type==1"><span style="color:#939a9d;font-size: ;">{{j.sourcename}} ({{j.time}})</span>:<br>{{j.msg}} </span>
                <span v-else-if="j.type==2"><span style="color:#939a9d;">{{j.sourcename}} ({{j.time}})</span>:<img height="200" width="200" style="margin-left:10px;" :src="j.thumbpath" alt=""></span>
                <span v-if="j.type==8"><span style="color:#939a9d;">{{j.sourcename}} ({{j.time}})</span>:<br>【1文件：{{j.title}} {{j.desc}}】</span>
                <span v-if="j.type==6"><span style="color:#939a9d;">{{j.sourcename}} ({{j.time}})</span>:<br>位置信息：【{{j.title}} {{j.desc}}】</span>
                <span v-if="j.type==29"><span style="color:#939a9d;font-size: ;">{{j.sourcename}} ({{j.time}})</span>:<br>{{j.msg}} </span>
                <span v-if="j.type==4"><span style="color:#939a9d;font-size: ;">{{j.sourcename}} ({{j.time}})</span>:<br><video width="200" :src="j.thumbpath" controls></video></span>
              </p>
              <div v-if="showBiaoJi">
                <div class="badgeBox" style=""  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:10px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>

              </div>
            </div>
          <!-- Left --> <!-- 无法解析 -->
          <div v-else class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
            <div style="position:relative;">
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;border-radius: 5px;" v-if="item.contactavatar" :src="item.contactavatar" />
                <img @click="openAccountDetials(item)" style="height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span v-if="item.recovery==1"  class="delClass" style="color:red;"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span style="cursor: pointer;padding-left:20px;" @click="openFileDetailsfunction(item)"  v-if="formateContentLast(item.contant)" title="点击查看详情"><i class="el-icon-folder"></i> {{ item.contant }}</span>
                <p v-else>
                  <span> 该消息类型无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                  <span class="viewsInfoDetailsMessages(item)" @click="viewsErroMessagesDetails(item)">查看详情</span>
                </p>
              </div>
              <br>
              <div v-if="showBiaoJi">
                <div class="badgeBox" style=""  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:10px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>

            </div>
        </div>
        <!-- ************************************************发送区******************************************************* -->

        <div v-else :id="'item-'+item.id">

        <div v-if="item.msgtype==-1012" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{$t('wechat.systemTip')}}：{{item.contant}}
      </div>
      <div v-else-if="item.msgtype==10000 || item.msgtype==10002 || item.msgtype==570425393" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
                <div :title="formateHongBaoSystem(item)">{{formateHongBaoSystem(item)}}</div><span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span>
      </div>
      <!--   -->
      <div v-else-if="item.msgtype==268445456" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{item.contant}}
      </div>
      <!-- 共享位置 -->
      <div v-else-if="item.msgtype==-1879048186" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{positionGongXiang(item.contant).msg.appmsg.title}}
      </div>
      <!-- Right --> <!-- 视频 -->
      <!-- <div v-else-if="item.msgtype==43" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
             <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
        <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
        <div style="text-indent: 0px;">
          <div class="demo-image__preview">
            <video width="100%" controls :src="item.respath"></video>
          </div>
        </div>
      </div> -->
      <!-- Right --> <!-- 视频/图片 -->
<div v-else-if="item.msgtype==43" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
  <div style="position:relative;">
    <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
    <img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
    <div v-if="startPrint" 
         style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;">
      <el-button @click="handleClickPrint(item,$event)" size="small" type="text">添加</el-button>
    </div>
  </div>

  <div>
    <span>
      <span v-if='item.sendernick'>{{item.sendernick}}</span>
      <span v-else>{{item.sendername}}</span>
    </span>
    <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span>
    <span style="color:red;" v-if="item.recovery==1">
      <i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}
    </span>
  </div>

  <div style="text-indent: 0px;">
    <div class="demo-image__preview">
      <!-- 判断 respath 是视频还是图片 -->
      <video v-if="isVideo(item.respath)" width="100%" controls :src="item.respath"></video>
      <img v-else-if="isImage(item.respath)" :src="item.respath" style="width:200px;height:200px;border-radius:6px;" />
      <span v-else>无法识别的文件类型</span>
    </div>
  </div>
</div>

                  <!-- Left --> <!-- 群接龙 -->
      <div v-else-if="item.msgtype==805306417" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
        <div style="position:relative;">
           <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
          <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
        </div>
        <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
        <div>
          <div class="chat-right_triangle"></div>
          <span style="word-wrap: break-word;">{{qunChatList(item.contant).msg.appmsg.title}}</span>
          <div v-if="showBiaoJi">
            <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
          <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
      </div>
      <!-- Right --> <!-- 转发聊天记录 -->
      <div v-else-if="item.msgtype==49 && item.contant.indexOf('聊天记录')!==-1" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
        <div style="position:relative;">
           <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
          <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
        </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span v-if="item.recovery==1"  class="delClass" style="color:red;"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <!-- <div>
                <div class="chat-right_triangle"></div>
                <p style="margin-bottom:10px;color:blue;text-align: center;">转发的聊天记录</p>
                <p class="qunItemBox" v-for="(j,key) in StringQunLiao(item.contant).msg" :key="key">
                <span v-if="j.type==1"><span style="color:#939a9d;font-size: ;">{{j.sourcename}} ({{j.time}})</span>:<br>{{j.msg}} </span>
                <span v-else-if="j.type==2"><span style="color:#939a9d;">{{j.sourcename}} ({{j.time}})</span>:<img height="200" width="200" style="margin-left:10px;" :src="j.thumbpath" alt=""></span>
                <span v-if="j.type==8"><span style="color:#939a9d;">{{j.sourcename}} ({{j.time}})</span>:<br>【文件：{{j.title}} {{j.desc}}】</span>
                <span v-if="j.type==6"><span style="color:#939a9d;">{{j.sourcename}} ({{j.time}})</span>:<br>位置信息：【{{j.title}} {{j.desc}}】</span>
                <span v-if="j.type==29"><span style="color:#939a9d;font-size: ;">{{j.sourcename}} ({{j.time}})</span>:<br>{{j.msg}} </span>
                <span v-if="j.type==4"><span style="color:#939a9d;font-size: ;">{{j.sourcename}} ({{j.time}})</span>:<br><video width="200" :src="j.thumbpath" controls></video></span>
              </p>
              <div v-if="showBiaoJi">
                <div class="badgeBox" style=""  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:10px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div> -->

              <!-- </div> -->
              <div>
              <h4 style="text-align: center;color:#0590df;">转发的聊天记录</h4>
                <span style="font-size: 13px;color: #9d9d9d;">描述：{{messageRemrd(item.contant).desc}}</span>
                <p v-for="(qunliaoItem,sisi) in messageRemrd(item.contant).msg" :key="sisi">
                    <!-- 转发文字 -->
                    <span v-if="qunliaoItem.type==1" style="margin-bottom:10px;">
                      <span style="margin-top:10px;color:#0590df;display: block;">{{qunliaoItem.sourcename}}:</span>
                      <span style="font-size: 13px;color: #9d9d9d;">{{ qunliaoItem.time }}</span><br>
                      <span style="font-size: 13px;">{{qunliaoItem.msg}}</span>
                    </span>
                    <!-- 转发图片 -->
                    <span v-else-if="qunliaoItem.type==2" style="margin-bottom:10px;">
                      <span style="margin-top:10px;color:#0590df;display: block;">{{qunliaoItem.sourcename}}:</span>
                      <span style="font-size: 13px;color: #9d9d9d;">{{ qunliaoItem.time }}</span><br>
                      <span style="font-size: 13px;">[图片]</span>
                    </span>
                    <!-- 转发链接 -->
                    <span v-else-if="qunliaoItem.type==5" style="margin-bottom:10px;">
                      <span style="margin-top:10px;color:#0590df;display: block;">{{qunliaoItem.sourcename}}:</span>
                      <span style="font-size: 13px;color: #9d9d9d;">{{ qunliaoItem.time }}</span><br>
                      <a title="点击跳转" :href="qunliaoItem.weburlitem.link" target="blank">
                        <span >链接：{{qunliaoItem.weburlitem.title}}</span>
                      </a>
                    </span>
                    <span v-else style="font-size:13px;">
                      未知
                    </span>
                  </p>


                  <div v-if="showBiaoJi">
                  <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                    <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
            </div>
            </div>

            <!-- right --> <!-- 分享链接 公众号 -->
            <div v-else-if="item.msgtype==1040187441" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                 <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
                <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="hrefBox" v-if="initFormateMusic(item.contant).msg.appinfo" @click.stop="openMusic(initFormateMusic(item.contant).msg.appmsg.url)">
                  <div class="hrefBoxLeftBox">
                    <span v-if="initFormateMusic(item.contant).msg.appinfo" class="grefTitleSpan">{{initFormateMusic(item.contant).msg.appinfo.appname}}</span>
                    <p v-if="initFormateMusic(item.contant).msg.appinfo" class="hrefBoxContentDeatils">{{initFormateMusic(item.contant).msg.appmsg.title}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img v-if="initFormateMusic(item.contant).msg.appinfo" width="100%" height="100%" :src="initFormateMusic(item.contant).msg.appmsg.songalbumurl" alt="">
                  </div>
                </div>
                <div v-else>暂无内容！</div>
                <div class="textInfo">分享链接</div>
                <div v-if="showBiaoJi" style="background-color: #fff;">
                  <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:10px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
              </div>
            </div>

        <!-- Right --> <!-- 文本 -->
        <div v-else-if="item.msgtype==1 || item.msgtype==808180  || item.msgtype==822083633 || item.msgtype==64"  class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
             <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div>
            <div class="chat-right_triangle"></div>
            <span style="word-wrap: break-word;">
              {{item.contant}}</span>
              <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
          </div>
        </div>
        <!-- Right 微信发票 -->
        <div v-else-if="item.msgtype==452984881" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img src="../../../assets/images/weChatQQ/user-group.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
                <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="hrefBox" @click.stop="openMusic(initFormateMusic(item.contant).msg.appmsg.url)">
                  <div class="hrefBoxLeftBox">
                    <span class="grefTitleSpan">{{initFormateMusic(item.contant).msg.appmsg.des}}</span>
                    <p class="hrefBoxContentDeatils">{{initFormateMusic(item.contant).msg.appmsg.title}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" :src="initFormateMusic(item.contant).msg.appmsg.thumburl" alt="">
                  </div>
                </div>
                <div class="textInfo">分享链接</div>
                <div v-if="showBiaoJi" style="background-color: #fff;">
                  <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:10px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
              </div>
            </div>

            <div v-else-if="item.msgtype==66" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
                <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="hrefBox">
                  <div class="hrefBoxLeftBox" style="text-align:center;">
                    <span class="grefTitleSpan" >{{formateXmlToJson(item).msg._nickname}}</span>
                    <p class="hrefBoxContentDeatils">{{formateXmlToJson(item).msg._openimdesc}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" :src="formateXmlToJson(item).msg._bigheadimgurl" alt="">
                  </div>
                </div>
                <div class="textInfo">分享名片</div>
                <div v-if="showBiaoJi" style="background-color: #fff;">
                  <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:10px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
              </div>
            </div>
        <!-- Right --> <!-- 添加好友请求消息 -->
        <div v-else-if="item.msgtype==37" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
               <div style="position:relative;">
                 <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="background:#fff;text-indent: 0px;">
                <div class="nameCard" @click="viewsFriendCard(addWxFriendfMsg(item).msg)">
                  <div class="contentNameCard">
                    <img  height="" :src="formateCard(item).msg._bigheadimgurl" alt="">
                    <div class="nameCardNameTExt">{{addWxFriendfMsg(item)._content}}</div>
                  </div>
                  <div class="nameSiren">好友申请</div>
                  <div v-if="showBiaoJi">
                    <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                    <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                  </div>
                </div>
              </div>
            </div>
        <!-- Right --> <!-- 红包2001 链接5 小程序33 共享位置17 转账2000 -->
        <div v-else-if="(item.msgtype==49 || item.msgtype==419430449 || item.msgtype==436207665) && indexOfFunction(item.contant)!==-1" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
             <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <!-- xml解析json成功渲染 -->
          <div v-if="formateHongBao(item).html" style="text-indent: 0px;position: relative;">
                <div v-if="item.msgtype!==436207665">
                    <div class="chat-left_triangle"></div>
                    <span style="cursor: pointer;padding-left:20px;" @click="openFileDetailsfunction(item)" v-if="formateContentLast(item.contant)" title="点击查看详情"><i class="el-icon-folder"></i> {{ item.contant }}</span>
                    <p v-else>
                      <span > 该消息类型无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                      <span class="viewsInfoDetailsMessages(item)" @click="viewsErroMessagesDetails(item)">查看详情</span>
                    </p>
                  </div>
                  <div v-else class="QunShouk">
                    <img :src="initQunshoukuan(item.contant).appmsg.thumburl" alt="">
                    <div style="margin-left:10px;">
                     <p>{{initQunshoukuan(item.contant).appmsg.wcpayinfo.receivertitle}}</p>
                    <p>{{initQunshoukuan(item.contant).appmsg.wcpayinfo.receiverdes}}</p>
                    </div>
                  </div>
                  <div v-if="showBiaoJi">
                    <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                    <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                  </div>
          </div>
      
          <!-- 红包 -->
          <div v-else-if="formateHongBao(item).msg.appmsg.type==2001 || item.msgtype==436207665" style="background:#fff;text-indent: 0px;position: relative;" >

            <img src="../../../assets/images/weChatQQ/hongbaoright.png" width="100%" height="100%" alt="">
            <div v-if="showBiaoJi">
              <div class="badgeBox" style="position:absolute;bottom:20px;right:20px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>

          </div>
          <!-- 转账 -->
          <div v-else-if="formateHongBao(item).msg.appmsg.type==2000 || item.msgtype==419430449" style="background:#fff;text-indent: 0px;position: relative;" >
              <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==8" class="hongbaotext">转账{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
              <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==4" class="hongbaotext">已退还{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
              <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==3" class="hongbaotext">收到转账{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>

            <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==9" class="hongbaotext">已被退还{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
            <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==1" class="hongbaotext">转账{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>

            <img src="../../../assets/images/weChatQQ/rightzhuanzhangright.png" width="100%" height="100%" alt="">
            <div v-if="showBiaoJi">
              <div class="badgeBox" style="position:absolute;bottom:20px;right:20px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
            <!-- </div> -->
          </div>
          <!-- 分享链接 -->
          <div v-else-if="formateHongBao(item).msg.appmsg.type==5" style="background:#fff;text-indent: 0px;position: relative;" >
            <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                <div class="hrefBox">
                  <div class="hrefBoxLeftBox">
                    <span class="grefTitleSpan" :title="formateHongBao(item).msg.appmsg.title">{{formateHongBao(item).msg.appmsg.title}}</span>
                    <p class="hrefBoxContentDeatils" :title="formateHongBao(item).msg.appmsg.des">{{formateHongBao(item).msg.appmsg.des}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" src="../../../assets/images/weChatQQ/link.png" alt="">
                  </div>
                </div>
                <div class="textInfo" style="text-align:left;">分享链接</div>
                <div v-if="showBiaoJi" style="background-color: #fff;">
              <div class="badgeBox" style="position:absolute;bottom:20px;right:20px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
              </div>
            </a>
          </div>
           <div v-else-if="formateHongBao(item).msg.appmsg.type==76" style="background:#fff;text-indent: 0px;position: relative;" >
                <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
                  <div style="text-indent: 0px;background:rgb(233, 233, 233);border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                    <div class="hrefBox">
                      <div class="hrefBoxLeftBox">
                        <span class="grefTitleSpan" :title="formateHongBao111(item).msg.appmsg.title">{{formateHongBao111(item).msg.appmsg.title}}</span>
                        <p class="hrefBoxContentDeatils" :title="formateHongBao111(item).msg.appmsg.des">{{formateHongBao111(item).msg.appmsg.des}}</p>
                      </div>
                      <div class="hrefBoxrightBox">
                        <img width="100%" height="100%" :src="formateHongBao111(item).msg.appmsg.songalbumurl" alt="">
                      </div>
                    </div>
                    <div class="textInfo" style="text-align:left;">分享音乐</div>
                    <div v-if="showBiaoJi" style="">
                      <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                      <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:0px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                    </div>

                  </div>
                </a>
              </div>
          <!-- 文件 -->
          <div v-else-if="formateHongBao(item).msg.appmsg.type==74" style="background:#fff;text-indent: 0px;position: relative;" >
            <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
              <div style="text-indent: 0px;background:rgb(233, 233, 233);border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                <div class="hrefBox">
                  <div class="hrefBoxLeftBox">
                    <span class="grefTitleSpan" :title="formateHongBao111(item).msg.appmsg.title">{{formateHongBao111(item).msg.appmsg.title}}</span>
                    <p class="hrefBoxContentDeatils" :title="formateHongBao111(item).msg.appmsg.des">{{formateHongBao111(item).msg.appmsg.des}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" src="../../../assets/images/weChatQQ/file.png" alt="">
                  </div>
                </div>
                <div class="textInfo" style="text-align:left;">文件(文件不存在)</div>
                <div v-if="showBiaoJi" >
                  <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:0px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>

              </div>
            </a>
          </div>
          <!-- 小程序 -->
          <div v-else-if="formateHongBao(item).msg.appmsg.type==17" style="background:#b2e281;text-indent: 0px;position: relative;" >
          <div >
            <div class="chat-right_triangle"></div>
            <span>
              {{formateHongBao(item).msg.appmsg.title}} <i class="el-icon-location-outline"></i></span>
          </div>
          </div>
          <div v-else-if="formateHongBao(item).msg.appmsg.type==6" style="background:rgb(233, 233, 233);text-indent: 0px;position: relative;" >
              <div >
                <span>
                  {{formateHongBao(item).msg.appmsg.title}}</span>
              </div>
              <div v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>

              </div>
          <div v-else-if="formateHongBao(item).msg.appmsg.type==33" style="background:#fff;text-indent: 0px;position: relative;" >
            <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                <div class="hrefBox">
                  <div class="hrefBoxLeftBox">
                    <span class="grefTitleSpan" :title="formateHongBao(item).msg.appmsg.title">{{formateHongBao(item).msg.appmsg.title}}</span>
                    <p class="hrefBoxContentDeatils" :title="formateHongBao(item).msg.appmsg.des">{{formateHongBao(item).msg.appmsg.des}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" src="../../../assets/images/weChatQQ/system.png" alt="">
                  </div>
                </div>
                <div class="textInfo" style="text-align:left;">小程序</div>
              </div>
            </a>
            <div v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:0px;float:right;color: #000;position: relative;bottom:30px;right:10px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>
          <div v-else style="background:rgb(233, 233, 233);text-indent: 0px;position: relative;" >
            <div>
              <div class="chat-right_triangle"></div>
                <!-- <span> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span> -->
                <br>
                {{ item.contant }}
              </div>
          </div>
        </div>
        <!-- Right --> <!-- 表情 -->
        <div v-else-if="item.msgtype==2 || item.msgtype==47" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
             <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
            
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
              <div class="demo-image__preview">
              <el-image
                  class="biaoqing-image"  
                  style="width:100%; height: 100%"
                  :src="item.respath?'file:///'+item.respath:formateImg(item)"
                  :preview-src-list="srcList">
              </el-image>
              </div>
              <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
          </div>
        </div>
        <!-- Right --> <!-- 图片 -->
        <div v-else-if="item.msgtype==3" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
             <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
             <img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
            <div class="demo-image__preview">
              <el-image
                style="width:100%; height: 100%"
                :src="item.respath"
                :preview-src-list="srcList">
              </el-image>
              <!-- 图片内文字 -->
            <p v-if="item.media_txt && item.media_txt.trim() !== ''" 
                class="image-extra-info media-text">
              <span class="label">图片内文字：</span>{{ item.media_txt }}
            </p>

            <!-- 标签 -->
            <p v-if="item.extra_txt && item.extra_txt.trim() !== ''" 
                class="image-extra-info extra-text">
              <span class="label">标签：</span>{{ item.extra_txt }}
            </p>
            </div>

            <!-- 标记按钮区域 -->
            <div v-if="showBiaoJi">
              <div class="badgeBox" v-if="item.cntRemark > 0">{{$t('wechat.remarked')}}</div>
              <el-button class="orderBtn"
                        :title="$t('wechat.remarkTip')"
                        v-else
                        @click="markOrder(item)"
                        type="text"
                        size="mini"
                        style="margin-right:20px;float:right;color:#000;"
                        icon="el-icon-edit">
                {{$t('wechat.biaoji')}}
              </el-button>
            </div>
          </div>

        </div>
        <!-- Right --> <!-- 语音 -->
          <div v-else-if="item.msgtype==34" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
            <div style="position:relative;">
               <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
              <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
            </div>
            <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
            <!-- <div class="yuyin" @click="detailsAuideInfo(item)">
              <span class="infoYuYin"  title=""></span>
              <div class="chat-right _triangle"></div>
              <span><i class="iconfont icon-saying"></i> 语音气泡</span>
              <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div> -->
            <div class="yuyin"  @click.stop="playAudioFile(item,index)">
                <span class="infoYuYin" title=""></span>
                <div class="chat-right_triangle"></div>
                <img :ref="`audioRef_${index}`" style="width:25px;height:25px;display:inline-block;" v-if="item.contactavatar" :src="leftAudioSrc" />
                <span> 语音气泡</span><img @click.stop="convertToText(item, index)" style="display: inline-block;margin-left:10px" src="../../../assets/rxaudio.png" height="20" width="20" title="转文字" alt="转文字">
                <div style="width:100%; margin: 0;text-align: left;color:#686b6d" v-if="transcriptions[index]">
                  {{ transcriptions[index] }}
                </div>
                <span @click.stop="detailsAuideInfo(item)" title="语音详情" style="margin-left:50px;font-size:20px;color:#0590df;"><i class="el-icon-warning-outline"></i></span>
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>
        <!-- Right --> <!-- 语音通话 -->
        <div v-else-if="item.msgtype==50" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
            <div style="position:relative;">
               <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
              <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
            </div>
            <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
            <div>
              <div class="chat-right_triangle"></div>
              <span v-if="item.contant=='voip_content_voice'">语音通话</span>
              <span v-else-if="item.contant=='voip_content_video'">视频通话</span>
              <span v-else>{{formateAudioCall(item).text}}<i style="margin-left:15px;font-weight:1000;" :class="formateAudioCall(item).icon"></i></span>
              <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>

            </div>
        </div>
        <!-- Right --> <!-- 名片 -->
        <div v-else-if="item.msgtype==42" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative">
             <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="background:#fff;text-indent: 0px;">
            <div class="nameCard" >
              <div class="contentNameCard">
                <img  height="" :src="formateCard(item).msg._bigheadimgurl" alt="">
                <div class="nameCardNameTExt">{{formateCard(item).msg._nickname}}</div>
              </div>
              <div style="text-align: left;padding-left:20px;">
                地区：{{formateCard(item).msg._city +'-'+formateCard(item).msg._province}}
                <br>
                个人名片
              </div>
              <div style="background-color: transparent;" v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- right --> <!-- 转发聊天记录 -->
        <div v-else-if="(item.msgtype==353 || item.msgtype==-19) && item.contant.indexOf('<msg>')==-1" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
             <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
            <div>
              <h4 style="text-align: center;color:#0590df;">转发的聊天记录</h4>
                <span style="font-size: 13px;color: #9d9d9d;">描述：{{messageRemrd(item.contant).desc}}</span>
                <p v-for="(qunliaoItem,sisi) in messageRemrd(item.contant).msg" :key="sisi">
                    <!-- 转发文字 -->
                    <span v-if="qunliaoItem.type==1" style="margin-bottom:10px;">
                      <span style="margin-top:10px;color:#0590df;display: block;">{{qunliaoItem.sourcename}}:</span>
                      <span style="font-size: 13px;color: #9d9d9d;">{{ qunliaoItem.time }}</span><br>
                      <span style="font-size: 13px;">{{qunliaoItem.msg}}</span>
                    </span>
                    <!-- 转发图片 -->
                    <span v-else-if="qunliaoItem.type==2" style="margin-bottom:10px;">
                      <span style="margin-top:10px;color:#0590df;display: block;">{{qunliaoItem.sourcename}}:</span>
                      <span style="font-size: 13px;color: #9d9d9d;">{{ qunliaoItem.time }}</span><br>
                      <span style="font-size: 13px;">[图片]</span>
                    </span>
                    <!-- 转发链接 -->
                    <span v-else-if="qunliaoItem.type==5" style="margin-bottom:10px;">
                      <span style="margin-top:10px;color:#0590df;display: block;">{{qunliaoItem.sourcename}}:</span>
                      <span style="font-size: 13px;color: #9d9d9d;">{{ qunliaoItem.time }}</span><br>
                      <a title="点击跳转" :href="qunliaoItem.weburlitem.link" target="blank">
                        <span >链接：{{qunliaoItem.weburlitem.title}}</span>
                      </a>
                    </span>
                    <span v-else style="font-size:13px;">
                      未知
                    </span>
                  </p>
                  <div v-if="showBiaoJi">
                  <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                    <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
            </div>






          <!-- </div> -->
        </div>
        <!-- right --> <!-- 文件 -->
        <div v-else-if="item.msgtype==5 || item.msgtype==1090519089" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
             <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>

          <div v-if="item.respath" style="background:#fff;text-indent: 0px;position:relative;">
            <div class="nameCard"  @click="downLoadFile(item.respath,item)">
              <div class="contentNameCard">
                <img  height="" src="../../../assets/images/weChatQQ/file.png" alt="">
                <div class="nameCardNameTExt">{{item.contant}}</div>
              </div>
              <div class="nameSiren" style="text-align:left;">点击打开文件</div>
            </div>
            <div v-if="showBiaoJi">
              <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>

          </div>
          <div v-else style="background:#fff;text-indent: 0px;" :title="item.contant">
            <div class="nameCard">
              <div class="contentNameCard">
                <img  height="" src="../../../assets/images/weChatQQ/file.png" alt="">
                <div class="nameCardNameTExt">暂无文件路径</div>
              </div>
            </div>
            <div v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;bottom:10px;right:0px;"  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click.stop="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:40px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>
        </div>
        <!-- Right --> <!-- 位置 -->
        <div v-else-if="item.msgtype==48" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
             <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
              <div class="map">
                <div class="mapTitle">
                  <div style="width: 100%;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;" :title="formdatePosition(item)._poiname">{{formdatePosition(item)._poiname}}</div>
                      <span style="display:block;color:#6e6e6ea6;width:230px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{formdatePosition(item)._label}}</span>
                  </div>
                  <p class="mapBox" v-show="showMapTooger" ref='mapChat' style="overflow:hidden;position:relative;width:233px;height:180px;">
                      <chatMap class='mapmapmap'  style="float:none;" :iddata="`map${index}`" v-if="formdatePosition(item)" :position="formdatePosition(item)"/>
                  </p>
              </div>
              <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.remarkTip')" v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:-10px;float:right;color: #000;margin-top:30px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
          </div>
        </div>
  <!-- 无法解析单独显示 -->
        <div v-else class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
             <img style="border-radius: 5px;height:40px;width:40px;" v-if="self" :src="self" />
<img style="border-radius: 5px;height:40px;width:40px;" v-else src="../../../assets/images/weChatQQ/wechatFriend.png" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
          <div style="text-indent: 0px;position: relative;" >
            <div @click="openFileDetailsfunction(item)" v-if=formateContentLast(item.contant) style="cursor: pointer;" title="点击查看详情">
              <div class="chat-right_triangle"></div>
                <span><i class="el-icon-folder"></i> {{ item.contant }}</span>
            </div>
            <div v-else>
              <div class="chat-right_triangle"></div>
                <!-- <span> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span> -->
                <br>
                {{ item.contant }}
                <div v-if="showBiaoJi">
                  <div class="badgeBox" style=""  v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.remarkTip')"  v-else @click="markOrder(item)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;position: relative;bottom:10px;right:0px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
            </div>
          </div>
          </div>
        </div>
</div>

      </div>

      <div class="loadingBoxbottom" v-if="showLoading" style="color:#2196f3"><i :class="loadClass" style="color:#2196f3"></i> {{ loadingText }}</div>
      <a-affix :offset-bottom="50">
        <el-button type="primary" style="" @click="getPrintJsonStr" v-if="startPrint">{{$t('wechat.startDaYin')}}</el-button>
        <el-button style="" @click="closePrintFunction" v-if="startPrint">{{$t('wechat.close')}}</el-button>
      </a-affix>
    </div>
    <!-- 音频 -->
    <div v-if="!showDetails">
      <div style="margin-left:10px;cursor: pointer;" @click="backChat"><i class="el-icon-arrow-left"></i> 返回</div>
      <div class="audioBoxList" >
      <!-- <div style="padding:30px 10px;">
        <audio v-if="IsMp3(audioData.respath)" style="width:100%;" controls :src="audioData.respath"></audio>
        <audio v-if="!IsMp3(audioData.respath)" style="width:100%;" controls :src="codeSrc"></audio>
      </div> -->
      <h3 style="margin-top:100px;font-weight: bold;padding-left:10px;height:34px;border-bottom:1px solid #e7e7e7;line-height: 34px;margin-bottom:5px;">音频信息:</h3>
        <!-- <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;" ><i class="el-icon-warning-outline"></i> 若音频不能播放，请点击转码后播放！ <el-link type="primary" style="float: right;margin-right:20px;" @click="codeFormate(audioData)"><i v-if="showTime" class="el-icon-loading"></i> {{$t('wechat.playzhuanma')}}</el-link></div> -->
        <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;"><i class="el-icon-folder"></i> 发送人：{{ audioData.sendername}}</div>
        <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;"><i class="el-icon-files"></i> 时间：{{formDate(audioData.msgtime)}}</div>
        <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;"><i class="el-icon-lock"></i> MD5：{{ audioData.filemd5 }}</div>
        <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;word-break: break-all;"><i class="el-icon-guide"></i> {{$t('wechat.imgPath')}}:{{ audioData.respath }}</div>
    </div>
    </div>

    </div>
    <a-modal
      v-model="showFile"
      :footer="null"
      title="文件详情"
      :maskClosable="false"
      :getContainer="getRefsAff"
      width="85%"
      centered
      @ok="() => (showFile = false)"
    >
      <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;"><i class="el-icon-folder"></i>{{$t('wechat.fileName')}}：{{ fileDataItem.contant}}</div>
      <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;"><i class="el-icon-folder"></i> 发送人：{{ fileDataItem.sendername?fileDataItem.sendername:fileDataItem.sendernick}}</div>
        <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;"><i class="el-icon-files"></i> 时间：{{formDate(fileDataItem.msgtime)}}</div>
        <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;"><i class="el-icon-lock"></i> MD5：{{ fileDataItem.filemd5 }}</div>
        <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;word-break: break-all;"><i class="el-icon-guide"></i> {{$t('wechat.imgPath')}}:{{ fileDataItem.respath }}</div>
    </a-modal>

    <!-- 查看语音包Message详情 -->
    <a-modal
      title="语音详情"
      :getContainer="getRefsAff"
      :maskClosable="false"
      :footer="null"
      width="72%"
      :visible="visibleAudio"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
    <div class="audioBox">
      <div class="pathBox">
        <div class="itemAudio bottomBorder" style="border-top-right-radius: 5px;">
          <audio ref="audioDom" :src="codeSrc" controls></audio>
          时间：{{formDate(audioData.msgtime)}}
          <el-button size="small" style="margin-left:20px;" @click="playAudioFile(audioData)" v-html="html"></el-button>
        </div>
        <div class="itemAudio" style="border-bottom-right-radius: 5px;">
          <i class="el-icon-document-copy copy" @click.stop="copyAddress(audioData.respath)" title="复制" style="margin-right:10px;"></i>本地路径：{{audioData.respath}}
        </div>
      </div>
    </div>
    </a-modal>
    <!-- 查看转发聊天记录详情 -->
     <a-modal
      :maskClosable="false"
      :getContainer="getRefsAff"

      :footer="null"
      :title="MessageFriendTitle"
      :width="500"
      :visible="MessageFriendContentVisible"
      @ok="handleOkMessageFriend"
      @cancel="handleCancelMessageFriend"
    >
    <div>
      <div style="margin-bottom:10px;">简述：{{zhuanfaTitle}}</div>
      <div class="listBox">
      <div class="chatRecord" v-for="(item,index) in messageRDataList" :key="index">
        <div class="friendAvatar">
          <img  style="width:70%;height:70%;" src="../../../assets/images/weChatQQ/chartImg.png" alt="">
        </div>
        <div>

        </div>
        <div class="" style="background:#efeeee;padding:10px;border-radius:10px;" v-if="(item.msg instanceof Array)">

          <p style="">{{item.sourcename}} 转发聊天记录</p>
          <div style="width:350px;border-bottom:1px solid#fff;padding-top:15px;" v-for="(i,j) in item.msg" :key="j">
          <div v-if="(i.msg instanceof Array)">
            <p style="margin-bottom:10px;">{{i.sourcename}} 转发聊天记录中的转发聊天记录</p>
              <div v-for="(x,y) in i.msg" :key="y">
                <div style="padding-left:20px;">
                  <p>{{x.sourcename}}：{{x.msg}}</p>
                  <p style="margin-bottom:15px;">{{x.time}}</p>
                </div>
              </div>
          </div>
            <div v-else style="padding-left:20px;">
              <p>{{i.sourcename}}：{{i.msg}}</p>
              <p style="margin-bottom:15px;">{{i.time}}</p>
            </div>
          </div>
        </div>
        <div class="chatRecordContent" v-else>
            <div class="chatRecordContentLeft">
              <div class="friendNames" style="font-size:13px;color:#898989d9;">{{item.sourcename}}</div>
              <div class="friendNames friendNamesContent" style="font-size:1000;" title="详情提示">{{item.msg}}</div>
            </div>
              <div class="chatRecordDate">{{item.time}}</div>
          </div>
      </div>
      </div>

    </div>

    </a-modal>
    <!-- 查看推荐好友名片 -->
    <a-modal
      v-model="modal2Visible"
      :getContainer="getRefsAff"
      :maskClosable="false"
      :footer="null"
      title="详情"
      centered
      @ok="() => (modal2Visible = false)"
    >
    <div class="cardContent">
      <img width="100px" height="100px" :src="card._bigheadimgurl" alt="">
      <div class="cardTextInfo" v-if="card">
        <p style="font-weight:1000;display:flex;align-items:center;font-size:20px;">{{card._nickname}}</p>
        <p v-if="card._fullpy">昵称:{{card._fullpy}}</p>
        <p v-if="card._fromnickname">昵称:{{card._fromnickname}}</p>
        <p v-if="card._content">备注:{{card._content}}</p>
        <p v-if="card._sex==1">性别:男</p>
        <p v-else-if="card._sex==2">性别:女</p>
        <p v-else>性别:未知</p>
        <p>地区:{{card._province}}-{{card._city}}</p>
        <p v-if="card._sharecardnickname">推荐人昵称：{{card._sharecardnickname}}</p>
        <p v-if="card._sharecardusername">推荐人微信号：{{card._sharecardusername}}</p>
      </div>
    </div>

    </a-modal>

    <!-- 无法解析消息类型详情 -->
    <a-modal
      v-model="erroMessageModel"
      :footer="null"
      width="100%"
      title="消息详情"
      :maskClosable="false"
      :getContainer="getRefsAff"
      centered
      @ok="() => (erroMessageModel = false)"
    >
    <div v-if="unKnowData">
      {{unKnowData.contant}}
    </div>
    </a-modal>

    <!-- 49类型合并转发 -->
      <a-modal
      v-model="hebingShow"
      :footer="null"
      :getContainer="getRefsAff"
      :maskClosable="false"
      title="合并转发"
      centered
      @ok="() => (hebingShow = false)"
    >
    <el-table
    :data="hebeingList"
    border
    style="width: 100%">
    <el-table-column
      prop="realchatname"
      label="发送者名称"
      >
    </el-table-column>
    <el-table-column
      prop="msg"
      label="消息内容"
      >
    </el-table-column>
    <el-table-column
      prop="time"
      label="时间">
    </el-table-column>
  </el-table>
    </a-modal>
      <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
        :maskClosable="false" title="提示" @ok="handleOk11">
        <p>{{$t('wechat.biaojibeizhu')}}</p>
        <p><el-input type="textarea" v-model="remark"></el-input></p>
      </a-modal>


      <!--打印窗口 -->
      <a-modal width="300px" v-model="showPrint" :getContainer="getRefsAff"
        :maskClosable="false" title="选择打印方式" @ok="printOk">
        <el-radio-group v-model="formResource">
          <el-radio label="打印所有已读" style="margin-bottom:10px;font-size:18px;"></el-radio>
          <el-radio label="手动添加已读打印" style="margin-bottom:10px;font-size:18px;"></el-radio>
          <el-radio :label="$t('wechat.selfsmsjietu')" style="margin-bottom:10px;font-size:18px;"></el-radio>
        </el-radio-group>
      </a-modal>
   <!-- 聊天对象账号信息 -->
    <a-modal
    :zIndex="1000000"
    :footer="null"
    :maskClosable="false"
    :getContainer="getRefsAff" :destroyOnClose="true" v-model="accountInfoDetailsShow" width="80%" >
    <div style="display: flex;">
        <img v-lazy-img="this.contantDataChat.avatar" width="105" height="105" alt="">
        <div style="margin-left:15px;">
            <div>{{$t('wechat.username')}}：{{this.contantDataChat.nick}}</div>
            <div>{{$t('wechat.account')}}：{{this.contantDataChat.username}}</div>
            <div>{{$t('wechat.selfaccount')}}：{{this.contantDataChat.alias}}</div>
            <div>{{$t('wechat.region')}}：{{this.contantDataChat.province+' '+this.contantDataChat.city}}</div>
            <div>{{$t('wechat.qianm')}}：{{this.contantDataChat.signature}}</div>
            <div>{{$t('wechat.bangdingshouji')}}：{{this.contantDataChat.phone}}</div>
            <div>{{$t('wechat.phone')}}：</div>
            <div style="width: 100px;margin-left: 50px;">{{this.contantDataChat.fillInPhone}}</div>
            <div>
                <div v-if="this.contantDataChat.sex==1">{{$t('wechat.sexMan')}}</div>
                <div v-else-if="this.contantDataChat.sex==2">{{$t('wechat.sexWman')}}</div>
                <div v-else>{{$t('wechat.weizhi')}}</div>
            </div>
        </div>
    </div>
    </a-modal>
  </div>
</template>
<script>

import chatMap from '../map/chatMap.vue'
import { getWeChatFriendMessageList,searchFunction } from '@/api/weChat/weChat_api'
import { parseTime } from '@/utils/index'
import loadingTem from '../loading/index.vue'
import { getFormateCode } from '@/api/media/media_api'
import { openFilePosition } from '@/api/openFile/open_File'
import { sendMarkOrderApi } from '@/api/markApi/index'
import { throttle } from 'lodash';
import { write } from 'fs'
const x2js=require('x2js');
const x2jsone=new x2js(); //实例
import ScreenShort from "js-web-screen-shot";

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import axios from 'axios';
export default {
  props:['chatWithObj','accountData',"recovery",'offsetLimit','contantData'],
  name: "otherMessage1",
  components:{
    chatMap,
      loadingTem,
  },
  data(){
      return{
        accountInfoDetailsShow:false,
        contantDataChat:{},
        transcriptions: {},
        audioUrl:'',
        prvRefIndex:'',
        leftAudioSrc:require('../../../assets/leftStatic.png'),
        currentAudio:'',
        showMapTooger:true,
        mapShowD:true,
        stopAppendMessageData:false,
        storeArray:[],
        startPrint:false,
        printArray:[],
        formResource:'打印所有已读',
        scrollFunction:true,
        rushText:'反序',
        sortBy:0,
        showFile:false,
        fileDataItem:'',
        remarkMessageTime:0,
        selectld:-1,
        selectType:0, //0下1上
        selectTime:-1,
        isExistsSelectID:0,

        showTime:false,
        showDetails:true,
        loadClass:'el-icon-loading',
        loadingText:'正在加载. . .',
        showLoading:false,

        loadClass2:'el-icon-refresh-left',
        loadingText2:'点击加载更多',
        showLoading2:false,

        showPrint:false,
        pageIndexValue:'',
        dynamicTags:[],
        showPageN:false,
        showBiaoJi:true,
        loading:null,

        showRemark:false,
        remark:'',
        id:'',
        hebeingList:[],
        hebingShow:false,
        zhuanfaTitle:'',
        codeSrc:'',
        html:'点击转码',
        audioData:'',
        showLoadingBox:false,
        size:'100px',
        card:'',
        messageRDataList:[],
        offset:1,
        limit:30,
        searchWord:'',
        form:{
          type:[],
          delivery:''
        },
        unKnowData:'',
        total:0,
        self:'',
        messageData:[],
        erroMessageModel:false,
        modal2Visible: false,
        MessageFriendContentVisible:false,
        MessageFriendTitle:'聊天记录',
        icon:'el-icon-video-play',
        visibleAudio:false,
        confirmLoading: false,
        url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F512%2F0PQ2123I9%2F120PQ23I9-10-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646980202&t=e8f5aecc7763071d76513929b701069d',
        srcList:[],
        scrollTop:0
      }
  },

  watch:{
    '$store.state.account.wechatmessage1':function(){
      if(this.offsetLimit.msg_offset){
            this.offset=this.offsetLimit.msg_offset;
            this.selectld = this.offsetLimit.id;
            this.selectTime = this.offsetLimit.msgtime;
            this.isExistsSelectID = 1
            }else{
            this.offset=1
            this.total=0
            this.selectld=-1
            this.selectType=0//0下1上
            this.selectTime=-1
            this.isExistsSelectID=0
            this.loadClass2='el-icon-refresh-left'
            this.loadingText2='点击加载更多'
        }
            this.searchWord = ''
            this.showDetails = true;
            this.messageData = []
            this.onSearch()
            this.printArray = [];
    }
  },
  created(){
    if(this.offsetLimit.msg_offset){
          this.offset=this.offsetLimit.msg_offset
        }else{
          this.offset=1
          this.total=0
        }
        this.selectld=-1;
        this.selectType=0; //0下1上
        this.selectTime=-1;
        this.isExistsSelectID=0;
        this.loadingText2= '点击加载更多！'
    },
  methods:{
    openAccountDetials(item){
      this.accountInfoDetailsShow = true;
      console.log('',this.contantData);
      this.contantDataChat = this.contantData;
    },
    isVideo(path) {
    return path && (path.endsWith('.mp4') || path.endsWith('.avi') || path.endsWith('.mov'));
    },
    isImage(path) {
      return path && (path.endsWith('.jpg') || path.endsWith('.png') || path.endsWith('.gif'));
    },
     convertToText(item, index) {
      // 调用语音识别的API或方法
      let data = {
        filePath: item.respath
      }
       axios.post('http://localhost:3899/transcribe', data)
        .then(response => {
          // 处理成功的响应
          // 处理后端返回的数据
          if (response.status === 200) {
            this.$set(this.transcriptions, index, response.data.transcription.result[0]);
            // this.transcriptionResult = response.data.transcription.result;
            // this.error = '';
          } else {
            this.$set(this.transcriptions, index, '转文字失败了。');
          }
        })
        .catch(error => {
          // 处理错误的响应
          console.error('请求失败:', error);
          this.$set(this.transcriptions, index, '转文字失败了。');
        });
    },


    handleClickPrint(item,event){
      if(event.srcElement.innerHTML == '添加'){
        event.srcElement.innerHTML = '√已添加';
        event.srcElement.style.color = 'red';
        event.srcElement.style.fontWeight = '1000';
        this.printArray.push(item);
      }else{
        event.srcElement.innerHTML = '添加';
        event.srcElement.style.color = '#409EFF';
        event.srcElement.style.fontWeight = '500';
        const index = this.printArray.indexOf(item);
        if (index !== -1) {
          this.printArray.splice(index, 1);
        }
      }
    },
    rushShunXv(){
      this.selectld=-1;
      this.selectType=0; //0下1上
      this.selectTime=-1;
      this.isExistsSelectID=0;
      if(this.rushText == '反序'){
        this.rushText = '默认'
          this.sortBy = 1
      }else{
        this.rushText = '反序'
        this.sortBy = 0
      }
      this.messageData = [];
      this.onSearch();
    },
    openFileDetailsfunction(item){
      this.showFile = true;
      this.fileDataItem = item;
    },
    formateContentLast(item){
      if(item.includes('.zip') || item.includes('.7z') || item.includes('.rar') ||item.includes('.doc') || item.includes('.docx')|| item.includes('.excel') || item.includes('.xlsx')|| item.includes('.xls')|| item.includes('.pdf') || item.includes('.ppt')){
        return true
      }
    },
    clearMessage(){
      this.messageData = [];
      this.selectld = -1;
      this.selectType = 0; //0下1上
      this.selectTime = -1;
      this.isExistsSelectID = 0
    },
    backChat(){
      this.showDetails = true;
      this.audioData = '';
      this.codeSrc = '';
      this.showFile = false;
    },
    // codeFormate(url){
    //   this.showTime = true;
    //   let suffix = /\.([0-9a-zA-Z]+)$/i.exec(url.respath)[1]
    //   if(suffix!=='mp3'){
    //     let data={
    //       mediaPath:url.respath,
    //       mediaType:1
    //     }
    //     getFormateCode(data).then(res=>{
    //       this.showTime = false;
    //       this.codeSrc=res.data[0].direction;

    //     }).catch(err=>{
    //     })
    //   }else{
    //     this.showTime = false;
    //     this.codeSrc=url
    //   }
    // },
    codeFormate(url){
      this.showTime = true;
      let suffix = '';
      if(url.respath.includes('.')){
        suffix = /\.([0-9a-zA-Z]+)$/i.exec(url.respath)[1]
      }else{
        suffix = null;
      }
      if(suffix!=='mp3' || suffix==null){
        let data={
          mediaPath:url.respath,
          mediaType:1
        }
        getFormateCode(data).then(res=>{
          this.showTime = false;
          // this.showLoadingBox=false
          this.codeSrc=res.data[0].direction;

        }).catch(err=>{
          // this.showLoadingBox=false
        })
      }else{
        this.showTime = false;
        // this.html=`无需转码<i class="el-icon-check"/>`
        this.codeSrc=url
      }
    },
    IsMp3(path){
      if(path.includes('.')){
        let extension = path.split('.').pop();
      extension.toLowerCase();
      if(extension.toLowerCase()=='mp3'){
        return true;
      }else{
        return false;
      }
      }else{
        return false;
      }
      
    },
    loadMoreData(){
      const list = this.$refs.messageRef1;

      if(this.stopAppendMessageData)return;

      var scrollTopChange = 0;
      if(this.messageData.length>1000){
        console.log(this.messageData.length)
       const prevScrollTop = this.$refs.messageRef1.scrollTop;
           this.messageData.splice(0,-30);
           scrollTopChange = prevScrollTop - this.$refs.messageRef1.scrollTop;
      }else{

      }
      // if(this.messageData.length>100){
      //     this.messageData.splice(0,-30);
      // }
          this.scrollFunction = false;

          this.loadClass2 = 'el-icon-loading';
          this.loadingText2 = '正在加载. . .';
          let len = this.messageData.length;
          this.selectld = this.messageData[0].id;
          this.selectTime = this.messageData[0].msgtime;
          this.selectType = 1;
         
          // let that = this;
          // setTimeout(()=>{
            this.scrollTop = list.scrollTop-scrollTopChange;
            this.onSearchShift();
          // },1000)
          
    },
    throttleFn: throttle(function() {
      const list = this.$refs.messageRef1;
      var scrollTopChange = 0;
      if(this.messageData.length>1000){
        console.log(this.messageData.length)
       const prevScrollTop = this.$refs.messageRef1.scrollTop;
           this.messageData.splice(0,30);
           scrollTopChange = prevScrollTop - this.$refs.messageRef1.scrollTop;
      }else{

      }
      if(this.scrollFunction==false){
        return
      }
      if(this.stopAppendMessageData)return;
      this.isExistsSelectID=0;

      // 获取列表元素
      if(list.scrollTop==0 && list.scrollHeight==0)return;


      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight+20 >= list.scrollHeight) {

        this.showLoading=true;
        if(this.messageData.length<this.total){

          this.scrollTop = list.scrollTop-scrollTopChange;
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          let len = this.messageData.length;
          this.selectld = this.messageData[len-1].id;
          this.selectTime = this.messageData[len-1].msgtime;
          this.selectType = 0;
            this.onSearch();
        }
        else{
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }
      }

    },1000),

    setPageNumber(index){
      let data = {
        show:false,
        str:''
      }
      if(index+1<this.limit){
        let str = '第'+this.dynamicTags[0]+'页'
        data ={
          show:true,
          str:str
        }
        return data;
      }else if((index+1)%this.limit == 0){
        let str = '第'+this.dynamicTags[(index+1)/this.limit - 1]+'页'
        data ={
          show:true,
          str:str
        }
        return data;

      }else if((index+1)%this.limit !== 0){
        let str = '第'+this.dynamicTags[Math.ceil((index+1)/this.limit) - 1]+'页'
        data ={
          show:true,
          str:str
        }
        return data;
      }
    },
    addPageNumber(){
      // if(this.pageIndexValue == '')return;
      // if(this.dynamicTags.indexOf(this.pageIndexValue)==-1){
      //   this.dynamicTags.push(this.pageIndexValue);
      //   this.pageIndexValue = '';

      // }else{
      //     this.$message({
      //       message: '第' + this.pageIndexValue + '页码已存在打印队列中！！',
      //       type: 'warning'
      //     });
      //   this.pageIndexValue = '';
      // }
      // for (let index = 0; index < this.pageIndexValue; index++) {
      //   const element = index+1;
      //   this.dynamicTags.push(element);
      // }

      // let that = this;
      // that.loading = this.$loading({
      //     lock: true,
      //     text: '努力加载中请稍后...',
      //     spinner: 'el-icon-loading',
      //     background: 'rgba(0, 0, 0, 0.7)'
      //   });
        this.printJson();
    },
    closeTags(tag){
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    openPrintModel(){ 
      this.dynamicTags = [];
      this.showPrint = true;
    },
    printOk(){
      this.showPrint = false;
      if(this.formResource == '手动添加已读打印'){
        this.scrollTop = this.$refs.messageRef1.scrollTop;
        this.startPrint = true;
        this.printArray = [];
        return
      }else if(this.formResource == '对当前可视区域截图'){
        this.startPrint = false;
        this.captureScreenshots()
      }else{
        this.startPrint = false;
        setTimeout(()=>{
          this.printJson();
        },2000)
      }
    },
    async printJson() {
      this.showPrint = false;

      const res = await this.getPrintJsonStr();
      return
    },
    closePrintFunction(){
      this.stopAppendMessageData = true;
      this.storeArray = [];
      this.showBiaoJi = false;
      this.stopAppendMessageData = false;
      this.startPrint = false;
    },
    getPrintJsonStr(){
      this.stopAppendMessageData = true;
      this.storeArray = [];
      this.storeArray = this.messageData;
      this.showBiaoJi = false;

      // this.dynamicTags = []
      // let list = []
      // this.messageData = []
      // for (let index = 0; index < this.dynamicTags.length; index++) {
      //   const element = this.dynamicTags[index];

      //   let data={
      //     proof_num:this.chatWithObj.proof_num,
      //     account_id:this.chatWithObj.account_id,
      //     contactid:this.chatWithObj.username,
      //     model:'wechat',
      //     recovery:this.recovery,
      //     searchkey:this.searchWord,
      //     offset:Number(element),
      //     limit:this.limit
      //   }
      //   searchFunction(data,'/search/tencent/content').then(res=>{
      //         let item = {
      //           pageIndex:element,
      //           list:res.data
      //         }
      //         list.push(item);
      //   })
      // }

      // let that = this;
      // setTimeout(()=>{
      //         for (let j = 0; j < list.length; j++) {
      //           for (let i = 0; i < list[j].list.length; i++) {
      //             const d = list[j].list[i];
      //             this.messageData.push(d)
      //         }
      //     }
      // },1000*this.dynamicTags.length);

        switch (this.formResource) {
          case '打印所有已读':
            break;
          case '手动添加已读打印':
          this.startPrint = false;
          this.messageData = [];

          this.messageData = this.printArray;
          this.messageData = this.messageData.sort((a, b) => parseInt(b.msgtime) - parseInt(a.msgtime));
            break;
          case '对当前可视区域截图':
            
            break;
        
          default:
            break;
        }

        let that = this;
        // this.showMapTooger = false;
      setTimeout(()=>{
              let dom = that.$refs.messageRef1;
                dom.style['box-shadow']="none"
                dom.style['overflow-y']="visible"
              let focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 1500);
              
                printJS({
                    printable: 'print-area',
                    documentTitle:'  数据报告-打印',
                    type: 'html',
                    style:`
                    .mapmapmap{
                      width:200px;
                      heihgt:185px;
                    }
                    .container{
     width: 233px;
     height: 180px;
  }
  @media screen and (min-width: 2360px) {
.container{
     width: 1rem;
     height: 0.8rem;
  }
  }
                    @media print {
                      body {
    background-color: white !important;
    padding-right:30px;
  }
img{
  height:auto;
  width:250px;
}


.el-icon-circle-close{
    color: #Fff;
}

.loadingBoxbottom{
  text-align: center;
  width: 100%;
  float: left;
}
  .QunShouk{
    background: #02c479;
    width: 200px;
    height: 80px;
    color: #fff;
    display: flex;
    padding: 10px;
    border-radius: 5px;
  }
.qunItemBox{
  /* height: 30px !important; */
  /* line-height: 30px !important; */
  padding-left:20px;
  margin-bottom: 10px;
}
.badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff !important;
  background: #f56c6c !important;
  text-align: center !important;
  float: right;
  line-height: 23px !important;
  padding: 0 !important;
  padding-left: 10px !important;
  position: relative;
  font-size: 12px;
  z-index:10;
  /* top: -10px;
  right: -10px; */
}

.classBoxBest{
  width: 100px;
  height: 100px;
}
.biaozhuimg{
  width: 40px;
  height: 40px;
}
.copy{
  font-size: 20px;
  cursor: pointer;
}
.copy:hover{
  color: #409eff;
}
.loadingBox{
  position: relative;
  top: 40px;
  z-index: 100;
  text-align: center;
  line-height: 100px;
}
#systemTips{
  text-align: center;
  margin-bottom:10px !important;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color: rgb(146, 146, 146);
  font-size: 12px;
}
.nameCardNameTExt{
  margin-left: 20px;
}
.viewsInfoDetailsMessages{
  position: relative;
  right: -70px;
  top: 0px;
  font-size: 13px;
  font-weight: none;
  text-decoration:underline;
  color: #409eff;
  cursor: pointer;
}
.viewsInfoDetailsMessages:hover{
  color: #0616f5;
}
.cardContent{
  height: 100px;
  display: flex;

}
.cardTextInfo{
  padding-left: 20px;
}
.cardTextInfo>p{
  margin-bottom: 3px;
  font-size: 14px;
}
.grefTitleSpan{
  display: block;
  width: 170px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.hrefBox{
  width: 250px;
  height:47px;
  display: flex;
  align-items: center;
}
.hrefBox>div{
  height: 50px;
}
.hrefBoxLeftBox{
  width: 180px;
}

.hrefBoxrightBox{
  width: 40px;
  margin: 0 !important;
}
.hrefBoxContentDeatils{
  width: 170px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.textInfo{
  float: left;
  width: 230px;
  margin: 0 !important;
  border-top: 1px solid #ccc;
  padding-top: 2px !important;
}
.block{
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
}
.listBox{
  display: block;
  min-height: 700px;
  overflow-y: auto;
  margin: 0 !important;
}
.chatRecordDate{
  width: 100px;
  height: 60px;
  line-height: 60px;
  font-size: 12px;
}
.chatRecordContentLeft{
  height: 60px;
  width: 290px;
  padding-left: 20px;
}
.friendNamesContent{
    overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.friendNames{
  height: 30px;
  line-height: 30px;
}
.chatRecordContent{
  min-height: 60px;
  width: 400px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(231, 231, 231);
  /* background: #409eff; */
}
.chatRecord{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 200px;
}
.friendAvatar{
  width: 60px;
  height: 60px;
}
.bottomName{
  border-top: 1px solid #ccc;
  float: left;
  height: 20px;
  width: 100%;
  margin: 0 !important;
  text-indent: 0px;
  margin-top: 5px !important;

}
.titleMessageBoxBox{
  display: block;
  padding-left: 12px;
  max-width: 250px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
p{
  margin: 0;
}
#playAudio{
  position: absolute;
  font-size: 23px;
  color: #dfdfdf;
  top: 34.5%;
  left:34.5%;
  cursor: pointer;
  margin: auto;
}
.bottomBorder{
  border-bottom: 1px solid rgb(224, 224, 224);
}
.AudioLogo{
  position: relative;
  width: 78.14px;
  height: 78.14px;
  background: #e2e2e2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.itemAudio{
  height: 60px;
  width: 412px;
  background: #f3f3f3;
  width: 100%;
  padding: 9.3px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /*text-overflow:ellipsis;*/
  /*white-space: nowrap;*/
  word-wrap: wrap;
}
.pathBox{
  height: 100px;
  width: 100%;
  font-size: 12px;
}
.audioBox{
  width: 100%;
  height: 150px;
  display: flex;
  padding: 0 15px;
}
.infoYuYin{
  position: absolute;
  top: -7px;
  right: -7px;
  color: rgb(192, 192, 192);
  transition: .1s linear;
}
.infoYuYin:hover{
  color: #409eff;
  transition: .1s linear;
  transform: scale(1.1);
}

.yuyin{
  cursor: pointer;
  position: relative;
  width: 60%;
}
.nameSiren{
  height: 15.6px;
  width: 250px;
  float: left;
  margin: 0 !important;
  border-top: 1px solid rgb(219, 219, 219);
  text-indent: 18px;
}
.contentNameCard{
  height: 56.26px;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}
.nameCard{
  width: 250px;
  min-height: 73.6px;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  cursor: pointer;
}
.hongbaotext{
  position: absolute;
  right: 25px;
  top: 15px;
  color: #Fff;
}
.fenyeqi{
  /* float: left; */
  margin-top: 10px;
}
.mainContentBoxMessage{
  height: 500px;
}
.mapBox{
  overflow:hidden;position:relative;width:263px;height:180px;
    /* float: left; */
}
.mapTitle{
    width: 100%;
    height: 50px;
    padding: .03rem;
    float: left;
}
.map{
    width: 233px;
    height: 206px;
    background: #fff;
    border-radius: 4px;
}
.messageImg{
    display: block;
    width: 100%;
    height: 100%;
}
.chat-sender{
 margin-top: 0 !important;
}
.messageBoxFather{
  width: 100%;
  /* min-width:429px; */

}
.messageBox {
  width: 100%;
  min-height:800px;
  margin:0 auto;
  padding: 10px 10px;
  background: rgb(253, 253, 253);
  height: 98vh;
  overflow-y: auto;
  border-radius: 5px;
  padding-bottom:150px;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
}
.messageContentTitle {
  height: 56.26px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.friendName {
  line-height: 22.39px;
  font-size:13px;
}

.leftMessage{

}
/* 气泡样式 */
body {
  background-color: #ebebeb;
  font-family: -apple-system;
  font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI",
    sans-serif;
}
.chat-sender {
  clear: both;
  font-weight: bold;
}
.chat-sender div:nth-of-type(1) {
  float: left;
}
.chat-sender div:nth-of-type(2) {
  margin: 0 20px 2px 50px;
  padding: 0px;
  color: #848484;
  font-size: 60%;
  text-align: left;
}
.chat-sender div:nth-of-type(3) {
  background-color: rgb(233, 233, 233);
  float: left;
  max-width: 250px;
  margin: 0 20px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  text-indent: -12px;
}

.chat-receiver {
  clear: both;
  font-weight: bold;
}
.chat-receiver div:nth-of-type(1) {
  float: right;
}
.chat-receiver div:nth-of-type(2) {
  margin: 0px 50px 2px 50px;
  padding: 0px;
  color: #848484;
  font-size: 60%;
  text-align: right;
}
.chat-receiver div:nth-of-type(3) {
  float:right;
  max-width: 250px;
  background-color: #b2e281;
  margin: 0px 10px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
}

.chat-left_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent rgb(233, 233, 233) transparent transparent;
  position: relative;
  left: -22px;
  top: 3px;
  overflow: hidden;
}

.chat-right_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #b2e281;
  position: relative;
  right: -22px;
  top: 3px;
}

.chat-notice {
  clear: both;
  font-size: 70%;
  color: white;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}
.chat-notice span {
  background-color: #ececec;
  line-height: 25px;
  border-radius: 5px;
  padding: 5px 10px;
}

.messageBox::-webkit-scrollbar {
  width: 8px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.messageBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.messageBox::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.hongbaotext{
  width: 100px;
  position: absolute;
  right: 50px;
  top: 30px;
  color: #Fff;
  font-size: 12px;
}
/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
  .nameSiren{
  height: 0.06rem;
  width: 1rem;
  float: left;
  margin: 0 !important;
  border-top: 1px solid rgb(219, 219, 219);
  text-indent: .07rem;
}
.contentNameCard{
  height: 0.24rem;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}
.nameCard{
  width: 1rem;
  height: .31rem;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  cursor: pointer;
}
.hongbaotext{
  position: absolute;
  width: 150px;
  right: .15rem;
  top: .1rem;
  color: #Fff;
font-size: 13px;
}
.messageBox {
  margin:0 auto;
  /* width: 1.7rem; */
  /* min-height:800px; */
  padding: 10px 20px;
  background: rgb(253, 253, 253);
  /* height: 4.54rem; */
  max-height: 81vh;
  /* height: auto; */
  /* height: 600px; */
  /* overflow-y: auto; */
  border-radius: 5px;
  padding-bottom:150px;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}
.chat-receiver div:nth-of-type(3) {
  float:right;
  max-width: 1.1rem;
  background-color: #b2e281;
  margin: 0px 10px 10px 20px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
}
.chat-sender div:nth-of-type(3) {
  background-color: rgb(233, 233, 233);
  float: left;
  max-width: 1.1rem;
  margin: 0 20px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  text-indent: -12px;
}
.map{
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 4px;
}
.mapTitle{
    width: 100%;
    height: .2rem;
    padding: .03rem;
    float: left;
}
.friendName {
  line-height: 0.1rem;
  font-size: 0.07rem;
}
.messageContentTitle {
  height: 0.3rem;
  width: 1.7rem;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  border-bottom: 1px solid rgb(230, 230, 230);
  margin-bottom: 10px;
}
.messageBoxFather{
  /* width: 1.1rem; */
  min-width:403px;
}
.AudioLogo{
  position: relative;
  width: .5rem;
  height: .5rem;
  background: #e2e2e2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.itemAudio{
  min-height: .25rem;
  width: 412px;
  background: #f3f3f3;
  padding: .06rem;
  display: flex;
  align-items: center;
  /* overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap; */
  word-wrap: break-word
}
.pathBox{
  height: .5rem;
  width: 100%;
}
.audioBox{
  width: 100%;
  height: .5rem;
  display: flex;
  padding: 0 .1rem;
}
.hrefBox{
  width: 1rem;
  height:.2rem;
  display: flex;
  align-items: center;
}
.hrefBox>div{
  height: .2rem;
}
.hrefBoxLeftBox{
  width: .8rem;
}

.hrefBoxrightBox{
  width: .2rem;
  margin: 0 !important;
}
.hrefBoxContentDeatils{
  width: .7rem;
  height: .2;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.textInfo{
  float: left;
  width: 1rem;
  margin: 0 !important;
  border-top: 1px solid #ccc;
  padding-top: 2px !important;
}
.grefTitleSpan{
  display: block;
  width: .7rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
#playAudio{
  position: absolute;
  font-size: .16rem;
  color: #dfdfdf;
  top: 34.5%;
  left:34.5%;
  cursor: pointer;
  margin: auto;
}
.screenBox{
  height: 85vh;
  background: #fff;
  overflow: hidden;
}
}
}
@import url('leaflet/dist/leaflet.css');
.container{
    width: 233px;
    height: 180px;

}
  @media screen and (min-width: 2360px) {
.container{
    width: 1rem;
    height: 0.8rem;
}
}

`,
                    scanStyles:false,
                    targetStyles: ['*'],
                    ignoreElements:['no-print','bc','gb'],
                    onPrintDialogClose: () => { //取消打印回调
                    clearInterval(focuser);
                    dom.style.height="85vh"
                    dom.style['overflow-y']="auto"
                    that.showBiaoJi = true;
                    that.messageData = that.storeArray;
                    that.stopAppendMessageData = false;
                    that.$refs.messageRef1.scrollTop = that.scrollTop;
                    // that.showMapTooger = true;
                }
        })
      },1000)
    },

// 截图
captureScreenshots() {

  this.showPrint = false;
      // 获取当前页面的缩放比例
      const currentScale = window.devicePixelRatio;
      new ScreenShort({
        enableWebRtc: true, // 是否启用webrtc，值为false则使用html2canvas来截图
        loadCrossImg: true, // 跨域
        level: 999999999999999, // 层级
        // dpi: currentScale, // 设置 DPI
        // clickCutFullScreen:false,
        // wrcWindowMode:true
        
      });
  return;


  // return
 
  // return
  
      const scrollContainer = this.$refs.messageRef1;
      // const images = scrollContainer.querySelectorAll('img');
      // images.forEach((image) => {
      //   image.crossOrigin = 'Anonymous'; // 设置crossOrigin属性
      // })

      this.$refs.messageRef1.style.letterSpacing = '3px';
      html2canvas(scrollContainer, {
        ignoreElements: (element) => {
          // console.log(element.id)
          // 返回 true 表示忽略该元素，这里我们忽略所有图片元素
          return element.tagName === 'IMG'  || element.tagName === "svg" || element.tagName === "img" || (element.tagName == 'SPAN' && element.id == 'chatId')
           || element.tagName === "HEADER"  || element.tagName === "div" || element.tagName === "I" 
           || element.tagName === "path" || element.tagName === "defs" || element.tagName === "symbol" || element.tagName === "NOSCRIPT" || element.tagName === "STYLE";
        },
        allowTaint: false,
        useCORS: true
      },).then((canvas) => {
        // 处理截图结果
        const imageData = canvas.toDataURL('image/png');
        // console.log(imageData)
        // 创建一个下载链接
        const link = document.createElement('a');
        link.href = imageData;
        link.download = 'screenshot.png';

        // 触发点击事件以下载
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        this.$refs.messageRef1.style.letterSpacing = '0px';

      });
      return
},



dataURLtoBlob(dataURL) {
  const arr = dataURL.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
},

releaseLocalImagePaths(imagePaths) {
  imagePaths.forEach((path) => URL.revokeObjectURL(path));
},


    initQunshoukuan(content){
      try {
        let str=content.split('<msg>')[1].split('</msg>')[0];
        let xmlDo=x2jsone.xml2js(str);
        return xmlDo;
      } catch (error) {
      }
    },
    initFaPiao(content){
      let xmlDo=x2jsone.xml2js(content);
    },
    positionGongXiang(content){
      let xmlDo=x2jsone.xml2js(content);
      return xmlDo;
    },
    qunChatList(content){
      let xmlDo=x2jsone.xml2js(content);
      return xmlDo;
    },
    openMusic(url){
      window.open(url)
    },
      initFormateMusic(content){
       let xmlDo=x2jsone.xml2js(content);
       return xmlDo
      },
      StringQunLiao(str){
        try {
          return JSON.parse(str);
        } catch (error) {
          let data=[
                {
                    "direction": 2,
                    "fromuser": "",
                    "msg": "",
                    "realchatname": "happy_xiaolin",
                    "sourcename": "暂无",
                    "time": "2022-09-06 15:44:38",
                    "touser": "",
                    "type": 1
                },
          ]
          return data;
        }
      },
      handleOk11(){
        let data={
        msgtime:this.remarkMessageTime,
        navigation_list:'',
        model:"wechat",
        isChat:1,
        username:this.accountData.username,
        contact_username:this.chatWithObj.username,
        app_name:'好友',
        recovery:this.recovery,
        account_id:this.chatWithObj.account_id,
        proof_num:this.chatWithObj.proof_num,
        list_offset:this.offsetLimit.offset,
        list_limit:this.offsetLimit.limit,
        remark:this.remark,
        class:'',
        label:this.offsetLimit.label,
        msg_offset:this.offset,
        id:Number(this.id)
      }
      sendMarkOrderApi(data).then(res=>{
        this.showRemark=false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.messageData = [];
        this.onSearch()
      })
    },
    // 添加标记点
    markOrder(item){
      this.id=item.id;
      this.remarkMessageTime = item.msgtime;
      this.showRemark=true;
    },
  addWxFriendfMsg(item){
      let xml=item.contant;
       let xmlDo=x2jsone.xml2js(xml);
        try{
          return xmlDo.msg
        }catch(err){
          return '无法解析的添加好友消息类型！'
        }
    },
  // 查看49类型合并转发
  viewsDetailsInfo(list){
    this.hebeingList=list
    this.hebingShow=true
  },
  initStr(str){
    let data=JSON.parse(str)
    return data
  },
  indexOfFunction(str){
    return str.indexOf('<msg>')
  },
  copyAddress(valueData) {
	let oInput = document.createElement("input");
	//这边为链接地址this.liveLink='www.baidu.com'
	oInput.value = valueData;
	document.body.appendChild(oInput);
	oInput.select();
	document.execCommand("Copy");
	oInput.remove();
	this.$message({
		message: "复制成功",
		type: "success",
	});
},
    getRefsAff(){
      return  this.$parent.domFunction()
    },
    onSearchStart(){
      this.offset=1
      this.onSearch()
    },
    formateYinyongMessage(item){
      let data=JSON.parse(item)
    },
    // 格式化转发聊天记录
    messageRemrd(item){
      try {
        let reg = /\\/g;
        let str=item.replace(reg,'');

        return JSON.parse(str)
      } catch (error) {
        let data={
          desc:'未知错误'
        }
        return data
      }
    },
    // 下载文件
    downLoadFile(path,item){

      let data={
        filePath:path
      }
      openFilePosition(data).then(res=>{

      })
    },
    // 格式化位置信息
    formdatePosition(item){

      let xml=item.contant,
      stt = xml.replace(/\n/g, '');
          let arrt = stt.replace(/\t/g, '');
       let xmlDo=x2jsone.xml2js(arrt);
        try{
          if(xmlDo.html){
            return {
              _poiname:'暂无位置信息'
            }
          }else{
          return xmlDo.msg.location
          }
        }catch(err){

        }
    },
    // 格式化名片分享
    formateCard(item){
        let xml=item.contant,
        xmlDo=x2jsone.xml2js(xml);
        return xmlDo
    },
    //格式化语音通话
    formateAudioCall(item){
        try{
        if(item.contant.indexOf('recvtime')>0 && item.contant.split('<invitetype>')[1].split("</invitetype>")[0]==0){
          let data={
            text:'视频通话-时长'+ item.contant.split('<duration>')[1].split("</duration>")[0]+'秒',
            icon:'el-icon-video-camera'
          }
          return data
        }else{
          let data={
            text:'语音通话-时长'+ item.contant.split('<duration>')[1].split("</duration>")[0]+'秒',
            icon:'el-icon-phone-outline'
          }
          return data
        }
        }catch(err){
          let data={
            text:'未知的语音或视频通话',
            icon:'el-icon-question'
          }
          return data
        }
    },
    // 格式化红包
    formateHongBao(item){
        let xml=item.contant,
        xmlDo=x2jsone.xml2js(xml);
        return xmlDo
    },
        // 格式化红包
    formateXmlToJson(item){
        let xml=item.contant,
        xmlDo=x2jsone.xml2js(xml);
        console.log("0000000000000000000",xmlDo);
        return xmlDo
    },
        formateHongBao111(item){
      let xml=item.contant,
      stt = xml.replace(/\n/g, '');
          let arrt = stt.replace(/\t/g, '');
       let xmlDo=x2jsone.xml2js(arrt);
      try{
        // let xml=item.contant;
        //     xmlDo=x2jsone.xml2js(xml);
        let xml=item.contant,
        stt = xml.replace(/\n/g, '');
        let arrt = stt.replace(/\t/g, '');
        let xmlDo=x2jsone.xml2js(arrt);
            return xmlDo
        }catch(err){
          let data={
            msg:{
              appmsg:{
                type:5,
                title:'暂无',
                url:''
              }
            }
          }
          return data
        }
    },
    // 收红包
    formateHongBaoSystem(item){
        if(item.contant.indexOf('img')==-1){
          return item.contant
        }else{
          return item.contant.replace(/[^\u4e00-\u9fa5]/gi,"")
        }
    },

    formateHongBao111(item){
      let xml=item.contant,
      stt = xml.replace(/\n/g, '');
          let arrt = stt.replace(/\t/g, '');
       let xmlDo=x2jsone.xml2js(arrt);
      try{
        // let xml=item.contant;
        //     xmlDo=x2jsone.xml2js(xml);
        let xml=item.contant,
        stt = xml.replace(/\n/g, '');
        let arrt = stt.replace(/\t/g, '');
        let xmlDo=x2jsone.xml2js(arrt);
            return xmlDo
        }catch(err){
          let data={
            msg:{
              appmsg:{
                type:5,
                title:'暂无',
                url:''
              }
            }
          }
          return data
        }
    },
    // 收红包
    formateHongBaoSystem(item){
        if(item.contant.indexOf('img')==-1){
          return item.contant
        }else{
          return item.contant.replace(/[^\u4e00-\u9fa5]/gi,"")
        }
    },
    // 格式化图片路径
    formateImg(item){
        let xml=item.contant
        if(xml.indexOf('<msg>')!==-1){

          try{
            let emoji = xml.split('<msg>')[1].split('</msg>')[0];
            let xmlDo=x2jsone.xml2js(emoji)

            let str=xmlDo.emoji._cdnurl;
            var reg = new RegExp('&amp;','g');
            var test = str.replace(reg,'&');
            let emojiUrl=test.replace('*#*',':')
            return emojiUrl
          }catch(err){
            // return
          }
        }else{
          let url=require('../../../assets/null.png')
          return url;
        }

    },
    formDate(date){
      return parseTime(date)
    },
    onSearchShift(){
      // this.messageData.splice(0,this.messageData.length)

      // this.messageData=[];
      this.self=this.accountData.avatar;
      let data='';

        data={
          proof_num:this.chatWithObj.proof_num,
          account_id:this.chatWithObj.account_id,
          contactid:this.chatWithObj.username,
          model:'wechat',
          recovery:this.recovery,
          searchkey:this.searchWord,
          // offset:this.offset,
          sortBy:this.sortBy,
          limit:this.limit,
          selectId:this.selectld,
          selectType:this.selectType, //0下1上
          selectTime:this.selectTime,
          // isExistsSelectID:this.isExistsSelectID
          isExistsSelectID:0
      }
      const scrollTop = this.$refs.messageRef1.scrollHeight;

      searchFunction(data,'/search/tencent/content_new').then(res=>{
        try{
          if(res.data.length == 0){
            this.loadClass2 = 'el-icon-warning-outline';
            this.loadingText2 = '没有更多了！';
            return;
          }else{
            let aff = res.data.reverse()

        for (let index = 0; index < aff.length; index++) {
          const element = aff[index];

          this.messageData.unshift(element)
        }
      
        // this.$refs.messageRef1.scrollTop = this.scrollTop;
        this.$nextTick(() => {
            // 获取添加元素的高度
            // const newHeight = this.$refs.messageRef1.firstElementChild.offsetHeight;
            const newHeight = this.$refs.messageRef1.scrollHeight;

            // // 计算需要滚动的距离
            // const scrollDistance = newHeight;

            // 设置列表的滚动高度
            this.$refs.messageRef1.scrollTop = newHeight - scrollTop;
        });
        this.showLoading2=false;
          this.loadClass2 = 'el-icon-refresh-left';
          this.loadingText2 = '点击加载更多';

        this.total=res.data[0].cnt;
        let that = this;
        setTimeout(()=>{
          that.scrollFunction = true;
        },1000)
          }

        }catch{
        this.messageData=[]
        // this.total=0
        }
      })
    },
    // 搜索聊天内容
    onSearch(ss){
        
      // this.messageData.splice(0,this.messageData.length)
      if(ss){
        this.searchWord = ss;
        this.messageData = []
      }

      // this.messageData=[];
      this.self=this.accountData.avatar;
      let data='';

        data={
          proof_num:this.chatWithObj.proof_num,
          account_id:this.chatWithObj.account_id,
          contactid:this.chatWithObj.username,
          model:'wechat',
          recovery:this.recovery,
          searchkey:this.searchWord,
          // offset:this.offset,
          sortBy:this.sortBy,
          limit:this.limit,
          selectId:this.selectld,
          selectType:this.selectType, //0下1上
          selectTime:this.selectTime,
          isExistsSelectID:this.isExistsSelectID,
          // 筛选时间
          searchStartTime:this.offsetLimit.searchStartTime,
          searchEndTime:this.offsetLimit.searchEndTime
      }

      searchFunction(data,'/search/tencent/content_new').then(res=>{
        try{
          if(res.data.length == 0){
            this.loadClass = 'el-icon-success';
            this.loadingText = '到底了，没有更多了！';
            return;
          }
        let arr = res.data;

        for (let index = 0; index < arr.length; index++) {
          const element = res.data[index];
          this.messageData.push(element)
        }

        this.$refs.messageRef1.scrollTop = this.scrollTop;

        this.total=res.data[0].cnt;
        res.data.forEach(element => {
          this.srcList.push(element.respath)
        });
          
        }catch{
        this.messageData = []
        // this.total=0
        }
      })
    },

      // 搜索聊天内容
      flayRemark(item,proof_num,number){
      this.messageData=[];
      this.self=this.accountData.avatar;
      let data='';

        data={
          proof_num:this.chatWithObj.proof_num?this.chatWithObj.proof_num:proof_num,
          account_id:this.chatWithObj.account_id?this.chatWithObj.account_id:item.account_id,
          contactid:this.chatWithObj.username?this.chatWithObj.username:item.sendername,
          model:'wechat',
          recovery:this.recovery,
          searchkey:this.searchWord,
          // offset:this.offset,
          sortBy:this.sortBy,
          limit:this.limit,
          selectld:item.id,
          selectType:0, //0下1上
          selectTime:item.msgtime,
          isExistsSelectID:1
      }

      searchFunction(data,'/search/tencent/content_new').then(res=>{
        try{
          if(res.data.length == 0){
            this.loadClass = 'el-icon-success';
            this.loadingText = '到底了，没有更多了！';
            return
          }

        let arr = res.data;

        for (let index = 0; index < arr.length; index++) {
          const element = res.data[index];
          this.messageData.push(element)
        }
        this.$refs.messageRef1.scrollTop = this.scrollTop;

        this.total=res.data[0].cnt;
        res.data.forEach(element => {
          this.srcList.push(element.respath)
        });

        }catch{
        this.messageData=[]
        }
      })
    },
    // 查看无法解析的消息类型详情
    viewsErroMessagesDetails(item){
      this.unKnowData=item
      this.erroMessageModel=true
    },
    // 查看名片
    viewsFriendCard(data){
      this.card=data
      this.modal2Visible=true
    },
    // 查看分享聊天记录
    viewsMessageFriendList(item){
      this.zhuanfaTitle=item.desc
      this.messageRDataList=item.msg
      this.MessageFriendContentVisible=true
    },
  // 停止当前播放的音频
stopCurrentAudio() {
    if (this.currentAudio) {
      this.currentAudio.pause();
      this.currentAudio.currentTime = 0;
      this.currentAudio = null;
  }
},
    // 播放语音
    playAudioFile(url,index){

      if (this.currentAudio && this.prvRefIndex == index) {
        if (this.currentAudio.paused) {
          this.currentAudio.play();
          let d = this.$refs[`audioRef_${index}`];
              d[0].src = require('../../../assets/leftActive.gif');
        } else {
          let d = this.$refs[`audioRef_${this.prvRefIndex}`];
              d[0].src = require('../../../assets/leftStatic.png');
          this.currentAudio.pause();
        }
      }else{
        if(this.currentAudio){
          let d = this.$refs[`audioRef_${this.prvRefIndex}`];
        d[0].src = require('../../../assets/leftStatic.png');
            this.currentAudio.pause();
            this.currentAudio.currentTime = 0;
        }

        const audioImage = this.$refs[`audioRef_${index}`];
      this.prvRefIndex = index;
      if (audioImage) {
        audioImage[0].src = require('../../../assets/leftActive.gif');
      }
      this.html=`正在转码请稍后...<i class="el-icon-loading"/>`
      let data={
        mediaPath:url.respath,
        mediaType:1
      }
      getFormateCode(data).then(res=>{
      this.html=`转码完成<i class="el-icon-check"/>`
          // this.showLoadingBox=false
        // this.currentAudio = new Audio(res.data[0].direction);
        //   // audio.duration 音频时长
        //   this.currentAudio.play();
         // 创建新的音频对象
        const newAudio = new Audio(res.data[0].direction);
        this.currentAudio = newAudio;
        newAudio.addEventListener('canplaythrough', function() {
          // 音频现在已加载，可以播放
          console.log('音频已加载。时长：', newAudio.duration);
          
          this.codeSrc=res.data[0].direction
      });
        // 监听音频的元数据加载完成事件
        newAudio.addEventListener('loadedmetadata', () => {
          // 播放新的音频
          newAudio.play();
        });
        newAudio.addEventListener('ended', () => {
          console.log('音频播放结束');
          audioImage[0].src = require('../../../assets/leftStatic.png');
      });
      // 如果要处理无法加载音频的情况
      let that = this;
        newAudio.addEventListener('error', function() {
            console.error('加载音频时发生错误。');
            audioImage[0].src = require('../../../assets/leftStatic.png');
            that.$message({
              showClose: true,
              message: '加载音频时发生错误，请检查有无此音频文件！',
              type: 'error'
            });
        });

      }).catch(err=>{
        // this.showLoadingBox=false
        this.$message({
          showClose: true,
          message: '播放失败',
          type: 'error'
        });
      })
      }
    },
    detailsAuideInfo(item){
      this.showDetails = false;

      // this.html="点击转码"
      this.audioData=item
      this.codeSrc=''
      // this.visibleAudio=true
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visibleAudio = false;
        this.confirmLoading = false;
      }, 500);
    },
    handleCancel(e) {
      this.visibleAudio = false;
    },
    handleOkMessageFriend(){
      this.MessageFriendContentVisible = false;
    },
    handleCancelMessageFriend(){
      this.MessageFriendContentVisible = false;
    },
    // 聊天内容分页
    handleSizeChange(val) {
        this.limit=val;
    },
    handleCurrentChange(val) {
      this.offset=val
      this.onSearch()
    },
  }
};
</script>


<style >
.el-icon-circle-close{
    color: #Fff;
}

@media print {
  /* 隐藏除了指定区域以外的内容 */
  body * {
    /* display: none; */
  }
  
  /* 显示要打印的区域 */
  .printable-area, .printable-area * {
    display: block !important;
  }
}
</style>

<style scoped>
.image-extra-info {
  margin-top: 6px;
  padding: 6px 8px;
  background: #f9f9f9;
  border-radius: 4px;
  font-size: 13px;
  color: #555;
  line-height: 1.4;
  word-break: break-word;
}

.image-extra-info .label {
  color: #409EFF;
  font-weight: 600;
  margin-right: 4px;
}

.loadingBoxbottom{
  text-align: center;
  width: 100%;
  float: left;
}
  .QunShouk{
    background: #02c479;
    width: 200px;
    height: 80px;
    color: #fff;
    display: flex;
    padding: 10px;
    border-radius: 5px;
  }
.qunItemBox{
  /* height: 30px !important; */
  /* line-height: 30px !important; */
  padding-left:20px;
  margin-bottom: 10px;
}
.badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff !important;
  background: #f56c6c !important;
  text-align: center !important;
  float: right;
  line-height: 23px !important;
  padding: 0 !important;
  padding-left: 10px !important;
  position: relative;
  font-size: 12px;
  z-index:10;
  /* top: -10px;
  right: -10px; */
}

.classBoxBest{
  width: 100px;
  height: 100px;
}
.biaozhuimg{
  width: 40px;
  height: 40px;
}
.copy{
  font-size: 20px;
  cursor: pointer;
}
.copy:hover{
  color: #409eff;
}
.loadingBox{
  position: relative;
  top: 40px;
  z-index: 100;
  text-align: center;
  line-height: 100px;
}
#systemTips{
  text-align: center;
  margin-bottom:10px !important;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color: rgb(146, 146, 146);
  font-size: 12px;
}
.nameCardNameTExt{
  margin-left: 20px;
}
.viewsInfoDetailsMessages{
  position: relative;
  right: -70px;
  top: 0px;
  font-size: 13px;
  font-weight: none;
  text-decoration:underline;
  color: #409eff;
  cursor: pointer;
}
.viewsInfoDetailsMessages:hover{
  color: #0616f5;
}
.cardContent{
  height: 100px;
  display: flex;

}
.cardTextInfo{
  padding-left: 20px;
}
.cardTextInfo>p{
  margin-bottom: 3px;
  font-size: 14px;
}
.grefTitleSpan{
  display: block;
  width: 170px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.hrefBox{
  width: 250px;
  height:47px;
  display: flex;
  align-items: center;
}
.hrefBox>div{
  height: 50px;
}
.hrefBoxLeftBox{
  width: 180px;
}

.hrefBoxrightBox{
  width: 40px;
  margin: 0 !important;
}
.hrefBoxContentDeatils{
  width: 170px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.textInfo{
  float: left;
  width: 230px;
  margin: 0 !important;
  border-top: 1px solid #ccc;
  padding-top: 2px !important;
}
.block{
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
}
.listBox{
  display: block;
  min-height: 700px;
  overflow-y: auto;
  margin: 0 !important;
}
.chatRecordDate{
  width: 100px;
  height: 60px;
  line-height: 60px;
  font-size: 12px;
}
.chatRecordContentLeft{
  height: 60px;
  width: 290px;
  padding-left: 20px;
}
.friendNamesContent{
    overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.friendNames{
  height: 30px;
  line-height: 30px;
}
.chatRecordContent{
  min-height: 60px;
  width: 400px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(231, 231, 231);
  /* background: #409eff; */
}
.chatRecord{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 200px;
}
.friendAvatar{
  width: 60px;
  height: 60px;
}
.bottomName{
  border-top: 1px solid #ccc;
  float: left;
  height: 20px;
  width: 100%;
  margin: 0 !important;
  text-indent: 0px;
  margin-top: 5px !important;

}
.titleMessageBoxBox{
  display: block;
  padding-left: 12px;
  max-width: 250px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
p{
  margin: 0;
}
#playAudio{
  position: absolute;
  font-size: 23px;
  color: #dfdfdf;
  top: 34.5%;
  left:34.5%;
  cursor: pointer;
  margin: auto;
}
.bottomBorder{
  border-bottom: 1px solid rgb(224, 224, 224);
}
.AudioLogo{
  position: relative;
  width: 78.14px;
  height: 78.14px;
  background: #e2e2e2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.itemAudio{
  height: 60px;
  width: 412px;
  background: #f3f3f3;
  width: 100%;
  padding: 9.3px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /*text-overflow:ellipsis;*/
  /*white-space: nowrap;*/
  word-wrap: wrap;
}

.pathBox{
  height: 100px;
  width: 100%;
  font-size: 12px;
}
.audioBox{
  width: 100%;
  height: 150px;
  display: flex;
  padding: 0 15px;
}

.infoYuYin{
  position: absolute;
  top: -7px;
  right: -7px;
  color: rgb(192, 192, 192);
  transition: .1s linear;
}
.infoYuYin:hover{
  color: #409eff;
  transition: .1s linear;
  transform: scale(1.1);
}

.yuyin{
  cursor: pointer;
  position: relative;
  width: 60%;
}
.nameSiren{
  height: 15.6px;
  width: 250px;
  float: left;
  margin: 0 !important;
  border-top: 1px solid rgb(219, 219, 219);
  text-indent: 18px;
}

.contentNameCard{
  height: 56.26px;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}
.nameCard{
  width: 250px;
  min-height: 73.6px;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  cursor: pointer;
}
.hongbaotext{
  position: absolute;
  right: 25px;
  top: 15px;
  color: #Fff;

}
.fenyeqi{
  /* float: left; */
  margin-top: 10px;
}
.mainContentBoxMessage{
  height: 500px;
}
.mapBox{
  overflow:hidden;position:relative;width:263px;height:180px;
    /* float: left; */
}
.mapTitle{
    width: 100%;
    height: 50px;
    padding: .03rem;
    float: left;

}
.map{
    width: 233px;
    height: 206px;
    background: #fff;
    border-radius: 4px;
}
.messageImg{
    display: block;
    width: 100%;
    height: 100%;
}
.chat-sender{
 margin-top: 0 !important;
}
.messageBoxFather{
  width: 100%;
  /* min-width:429px; */

}
.messageBox {
    width: 100%;
    margin:0 auto;
    padding: 10px 10px;
    background: rgb(253, 253, 253);
    height: 100%;
    overflow-y: auto;
    border-radius: 5px;
    padding-bottom:150px;
    
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
}
.messageContentTitle {
  height: 56.26px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
  
}
.friendName {
  line-height: 22.39px;
  font-size:13px;
}
</style>

<style scoped>
.leftMessage{

}
/* 气泡样式 */
/* body {
  background-color: #ebebeb;
  font-family: -apple-system;
  font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI",
    sans-serif;
} */
.chat-sender {
  clear: both;
  font-weight: bold;
}
.chat-sender div:nth-of-type(1) {
  float: left;
}
.chat-sender div:nth-of-type(2) {
  margin: 0 20px 2px 50px;
  padding: 0px;
  color: #848484;
  font-size: 12px;
  text-align: left;
}
.chat-sender div:nth-of-type(3) {
  background-color: rgb(233, 233, 233);
  float: left;
  max-width: 250px;
  margin: 0 10px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  text-indent: -12px;
}

.chat-receiver {
  clear: both;
  font-weight: bold;
}
.chat-receiver div:nth-of-type(1) {
  float: right;
}
.chat-receiver div:nth-of-type(2) {
  margin: 0px 50px 2px 50px;
  padding: 0px;
  color: #848484;
  font-size: 12px;
  text-align: right;
}
.chat-receiver div:nth-of-type(3) {
  float:right;
  max-width: 250px;
  background-color: #b2e281;
  margin: 0px 10px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
}

.chat-receiver div:first-child img,
.chat-sender div:first-child img {
  width: 40px;
  height: 40px;
  /*border-radius: 10%;*/
}

.chat-left_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent rgb(233, 233, 233) transparent transparent;
  position: relative;
  left: -22px;
  top: 3px;
  overflow: hidden;
}

.chat-right_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #b2e281;
  position: relative;
  right: -22px;
  top: 3px;
}

.chat-notice {
  clear: both;
  font-size: 70%;
  color: white;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}
.chat-notice span {
  background-color: #ececec;
  line-height: 25px;
  border-radius: 5px;
  padding: 5px 10px;
}

.messageBox::-webkit-scrollbar {
  width: 8px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.messageBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.messageBox::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.hongbaotext{
  width: 100px;
  position: absolute;
  right: 50px;
  top: 30px;
  color: #Fff;
  font-size: 12px;
}



</style>


